基于 elementUI table 组件实现自定义列、宽度、排序并联动同步

业界 作者：SegmentFault 2021-07-31 21:17:58 阅读：1330

作者：linong

来源：SegmentFault 思否社区

哈喽，大家好又是我。昨天有个人在群里问：“基于 elementUI 如何实现拖动修改列宽度，并同步在多个表格中”。

这个功能其实听常见的，在不同的使用者眼中关注点就应该是不一样的。比如：

• 项目的主管，更关心进度
• 前端开发，关心设计稿、接口什么时候提供
• 后端开发，关心前端什么时候写完，什么时候联调
• 测试人员，关心什么时候提测，以及对应人员是谁

前期调研

elementUI 支持那些功能、回调？

1. 宽度控制

1. 是否提供了回调函数？header-dragend(newWidth, oldWidth, column, event) 当拖动表头改变了列的宽度的时候会触发该事件
2. 是否提供了API用于获取当前宽度配置？没有提供
3. 宽度是否可以通过参数控制？提供，给 el-table-column 组件添加 width 属性即可。
4. 参数是首次有效，还是动态更新？动态更新所以可以使用 :width
5. 是否提供了拖拽调整宽度的方案？添加 border ，并且开启 resizable (默认开启)。
2. 字段顺序
1. 顺序是否可以通过参数控制？没提供，看了一遍并且搜索 排序、顺序、index 等关键词并无收获。主要排序能力都是对内容区域。
2. 如果无法通过参数配置，那么通过什么地方可以影响到排序规则？我们可以通过修改 <el-table-column> 的顺序来控制。

分析