如何实现自适应高度的el-table表格封装？

本文共计3008个文字，预计阅读时间需要13分钟。

前言：在公同实习中，使用vue+element-ui框架进行前端开发，遇到表格el-table使用较多，有些业务逻辑相似，某些地方使用重复性高，若多个页面使用相同功能，则需要多次重复编写逻辑。

前言

在公司实习使用vue+element-ui框架进行前端开发，使用表格el-table较为多，有些业务逻辑比较相似，有些地方使用的重复性高，如果多个页面使用相同的功能，就要多次重复写逻辑上差不多的代码，所以打算对表格这个组件进行封装，将相同的代码和逻辑封装在一起，把不同的业务逻辑抽离出来。话不多说，下面就来实现一下吧。

一、原生el-tbale代码——简单の封装

这里直接引用官方的基础使用模板，直接抄过来(✪ω✪)，下面代码中主要是抽离html部分，可以看出每个el-table-column中都含有prop、label、width属性，只不过这些属性值不太一样罢了，其余的部分都差不多一样，所以表头（表格每列el-table-column的定义）这里可以封装一下，把不同的地方封装成一个数组对象结构，然后通过for循环来完成html中的部分。