关于前端:Vue-eltable的二次封装

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

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

<el-table  :data="tableData"  style="width: 100%">  <el-table-column    prop="date"    label="日期"    width="180">  </el-table-column>  // ... 省略</el-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