vue2 element ui 的表格使用 sortablejs 拖拽列遇到的问题和解决方案

项目使用 element ui 的表格实现拖动表头可改变列的宽度,又使用sortablejs实现表格的列可拖拽到其他列的位置,导致出现如下的一些问题:

1、某一列宽变大或变小后,只有当前列可拖拽,其他列无法拖拽。

解决方案:在列宽发生改变后,销毁当前拖拽实例,再重新创建拖拽实例。

javascript 复制代码
this.sortDemo.destroy()

此方法可查看sortablejs官网 Sortable.js中文网

2、当表格没有横向滚动条时,某一列宽变大或变小时,其他列宽也会变大或变小。

根因:表格的每一列设置了min-width,当表格没有横向滚动条时,某一列宽变大或变小时,min-width 会把剩余宽度按比例分配给设置了 min-width 的列,这样才可以撑开表格的整体宽度。

结论:当表格有横向滚动条时就不会出现这个问题。

3、当表格没有数据时,列不可以拖拽,改变列宽后可拖拽。

解决方案:表格数据更新后,不管表格数据接口有没有返回数据,都需重新挂载拖拽监听事件,才可以拖拽列。

javascript 复制代码
this.reDrawTable()
相关推荐
十六年开源服务商4 分钟前
家庭装修公司网站方案策划2026
java·开发语言
Mr_Xuhhh7 分钟前
深入理解Java高级特性:反射、枚举与Lambda表达式实战指南
开发语言·python
XiYang-DING9 分钟前
【Java】TOP-K问题
java·开发语言
CHANG_THE_WORLD10 分钟前
模拟解析:宽度数组 `[1,2,1]`,10个条目的 XRef 流
java·前端·算法
枫叶丹411 分钟前
【HarmonyOS 6.0】Navigation组件新特性
开发语言·华为·harmonyos
格林威14 分钟前
GigE Vision 多相机同步终极检查清单(可直接用于项目部署)
开发语言·人工智能·数码相机·机器学习·计算机视觉·视觉检测·工业相机
禅思院15 分钟前
探索Vite深入 Rollup 分块插件:从零实现一个智能分包工具
前端·前端框架·vite
xinzheng新政18 分钟前
Javascript·深入学习基础知识2
开发语言·javascript·学习
咕噜签名-铁蛋25 分钟前
腾讯云ICP备案:变更主体&备案准备
前端·云计算·腾讯云
小码哥_常27 分钟前
解锁Android黑科技:动态加载Activity,让你的App秒变变形金刚
前端