element-ui组件库table组件优化封装

管理系统的前端项目中，表格是一个重要的功能，利用element-ui可以快速的开发。

el-table示例

根据element-ui的官方demo可以快速实现一个表格，但是在实际开发中如果后续需求需要增加列，不仅要在数据中增加列的字段，还需要在html中增加，维护起来不太方便。

利用v-for遍历列

 
tableData:[{
    label: '姓名',
    prop:'name'
},{
    label: '性别',
    prop: 'sex'
}]

利用v-for遍历可以大大简化html结构，增加新列可以只在数据中增加，而且也不影响数据的格式化

tableFormatter(row, column, cellValue){
   if (column.property === 'sex') {
      return cellValue === 0 ? '男' : '女'
   }else{
      return cellValue 
   } 
}

但是这种方式缺点也很明显，formatter只能返回字符串，假如某列需要一个Switch开关或者燃尽图遍历则没有办法实现。

那么是否有一种既可以实现功能又利于维护的方式？

利用render函数和el-table的自定义列

el-table自定义列demo

如demo中的示例，el-table的自定义列使用scope传递参数，scope.row为数据，scope.$index为索引。
我们可以在列的数据中加入自定义的参数，将所有的列都视为自定义列，如果存在自定义的参数则渲染我们自定义的参数，否则让此列展示默认的数据。
封装的table组件

使用

封装的table组件中可以传入min-width,align等属性，当然element-ui的table组件有几时个api不可能通过我们自己二次封装的table全部传递，但是大多常用的table列表都可以用这种方式实现，如果是特别复杂的还是建议用el-table。