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

40次阅读

共计 1452 个字符，预计需要花费 4 分钟才能阅读完成。

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

正文完