基于 elementUI table 组件实现自定义列、宽度、排序并联动同步
作者:linong
来源:SegmentFault 思否社区
哈喽,大家好又是我。昨天有个人在群里问:“基于 elementUI 如何实现拖动修改列宽度,并同步在多个表格中”。
这个功能其实听常见的,在不同的使用者眼中关注点就应该是不一样的。比如:
项目的主管,更关心进度 前端开发,关心设计稿、接口什么时候提供 后端开发,关心前端什么时候写完,什么时候联调 测试人员,关心什么时候提测,以及对应人员是谁
前期调研
elementUI 支持那些功能、回调?
宽度控制
是否提供了回调函数? header-dragend(newWidth, oldWidth, column, event)
当拖动表头改变了列的宽度的时候会触发该事件是否提供了API用于获取当前宽度配置?没有提供 宽度是否可以通过参数控制?提供,给 el-table-column
组件添加width
属性即可。参数是首次有效,还是动态更新?动态更新所以可以使用 :width
是否提供了拖拽调整宽度的方案?添加 border
,并且开启resizable
(默认开启)。字段顺序 顺序是否可以通过参数控制?没提供,看了一遍并且搜索 排序、顺序、index 等关键词并无收获。主要排序能力都是对内容区域。 如果无法通过参数配置,那么通过什么地方可以影响到排序规则?我们可以通过修改 <el-table-column>
的顺序来控制。
分析
关注公众号:拾黑(shiheibook)了解更多
赞助链接:
关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

随时掌握互联网精彩
- 远程控制工具ToDesk继续缩减免费用户配额 每月连接时长缩减至80小时
- Papermark 一个开源的文档分享平台
- 英镑汇率2023年5月30日
- 共聚有福之州|烽火通信亮相第五届数字中国建设峰会·云生态大会
- 北约22国领导人启动10亿欧元的防务创新基金
- 云端起舞,企业数字化转型提速
- 中国广电重启700MHz频率迁移项目招标
- 【杂谈快报】美安全部门已对27起特斯拉事故展开调查
- 【大公司创新情报】任正非:华为公司永远不会出售终端业务
- 虎牙过去12个月合作伙伴分成和内容投入达66亿元;百度将上线“一元购”;B站回应UP主“墨茶Official”死亡事件|Do早报
- AirPods Max 动手玩:花掉4399不如买两副索大法?
- QQ企鹅为何从不摘红围巾、干饭中状态上线……QQ的新变化
赞助链接