【vue】基于ElementUI封装了一个自定义Table组件

【代码背景】

最近写了10+表，上线以后时不时要改需求，一旦改动就是10+的工作量，所以决定把表格抽离出来单独写个组件，方便以后复用修改，这应该是写过最复杂的组件封装了，特此记录，小白一枚，接触vue也没多久，欢迎大家学习交流哦。

开发环境：vue + element ui

【准备工作】

封装组件的目的是方便复用，也就是多个地方引用相同或相似的组件功能，所以在封装之前一定要弄清楚，针对目前的Table需要封装哪些功能，有哪些共性可以抽离出来。这部分的思考非常重要，是影响组件封装质量的重要权衡点，所以多花一点时间是非常有必要的。

针对目前所有的表进行了分析，从样式上大致可分为4个部分：

->1. 序号列，每张表都有。

->2. 单位列，每张表都有，但是字段值label标签是变化的，label会根据后续查询操作进行更改，比如用户点击“险种”后，这里的label会从“单位”变成“险种”。

->3. 查询操作，这个字段是抽取共性最难的部分，几乎没有相似的地方，每张表的查询操作都不太一样，且各自查询逻辑也不一样。

->4. 其他字段渲染，有单层/多层表头之分。

相对应的解决办法如下：

->1. 序号列通过el-table可以自动完成渲染。

->2. 在渲染可变字段的时候，可以通过props传入变量。

->3. 针对这个变化最多的字段，之前也考虑过用循环的方式把查询按钮渲染出来，尝试写过固定格式，然后添加条件判断渲染，但是无法达到预期的效果，后来在查找资料的时候突然看到了“插槽”的概念，具体可以参考这篇文章：https://vue-js.com/topic/5f6d68f24590fe0031e591f5 ，瞬间解决了这个问题。把个性化的部分抽出来作为“插槽”部分完美和组件结合使用。

->4. 通过v-for循环渲染表头数据 

【完整代码】 

子组件 ReportTabel.vue

父组件引用组件

// 引入组件
import ReportTable from '@/components/ReportTable'

 【几点说明】

 （1）在渲染表头数据时把当前表头和单元格的样式也加进去了 

 的表头跟单元格的样式是通过header-cell-style和cell-style实现的，具体请参考Element - The world's most popular Vue UI framework

 

双层的表头为了区别字号大小所以写了2个style，实际上只需要header_style和cell_style就行了

（2） 在渲染单层/多层表头的时候，这里只写了针对两层的情况，如果需要渲染三层及以上可以参考之前写过的一个demo：【vue】基于ElementUI实现动态表格_爱吃香草冰淇淋的阿喵的博客-CSDN博客_vue动态表格

 （3）flexColumnWidth是为了自适应表格列宽，关于这个可以参考上一篇文：【vue】ElementUI el-table自适应列宽实现_爱吃香草冰淇淋的阿喵的博客-CSDN博客_vue表格宽度自适应

【参考】
https://vue-js.com/topic/5f6d68f24590fe0031e591f5