[Vue] el-table的二次封装

element-ui中的table组件(下文用el-table表述)在简单业务场景下(如单纯的数据展示)是够用的，如果需要稍微复杂一些的展示，借助vue的插槽也能够实现。总体来看，el-table有可用之处，但el-table也有不方便的地方。

以element-ui官网的的基础表格为例
https://element.eleme.io/#/zh-CN/component/table

  
  
  // ... 省略

el-table在实现这个表格时，表格有多少列，就要写几个，如果一个宽表，表格有15列，就要手写15个并绑定prop, label，这个操作重复且琐碎。那么对于有大量el-table使用的场景，对el-table二次封装是个很有必要的事情。

下面说一说我对el-table二次封装的目的，并给出代码实现。

需求：
1、避免多次写，避免多次绑定prop, label的重复操作。
2、保留el-table的表头、表内插槽。
3、默认开启show-overflow-tooltip (默认开启溢出展示tooltip)。
4、提供column级别的自定义排序。(因为el-table中column自带的sortable排序就是sort,对undefined的排序结果实在是不能看)
5、保留el-table的原有属性支持。

代码实现：
(组件名ThePlainTable)

注释：
1、v-for="col in tableTitle"批量渲染，用v-bind实现prop, label的绑定。
2、el-table表头插槽用ThePlainTable的具名插槽slotHeader来接收，表内插槽原本是匿名插槽，换为具名插槽slotName来接收。
3、如果tableTitile中的col没有指定hidden-overflow-tooltip为true，则开启show-overflow-tooltip。
4、sort-method实现。注意这个(a, b) => sortMethodObjcol.customSortMethod
将col.prop也传入了sort函数中，方便对不同的prop进行处理。
5、通过v-bind="$attrs"将ThePlainTable上的非 props 属性绑定到 组件上，实现属性透传。

其他：
1、第4条，这里sort-method虽然使用(a, b) => sortMethodObjcol.customSortMethod这种方式获取了prop，但是el-table在column级别的排序中无法获取升序、降序信息(无法获知点击之后是"asc"还是"desc")，因此在实现customSortMethod时无法根据asc、desc做出额外判断。这是el-table的先天不足，无解。
2、el-table是基于 DOM 渲染的，因此当表格展示的数据量较大或表格中有复杂的交互时，可能会出现性能问题(页面卡顿或加载时间延长)。

如果遇到复杂的column级别的排序，或遇到大量数据的展示，建议不要为难自己，直接放弃el-table，换用vxe-table。

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/dk66bw1ornr6gmlx