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()
相关推荐
iso少年几秒前
Go 语言并发编程核心与用法
开发语言·后端·golang
放牛的小伙3 分钟前
vue 表格 vxe-table 加载数据的几种方式,更新数据的用法
vue.js
be or not to be5 分钟前
CSS 背景(background)系列属性
前端·css·css3
故事不长丨8 分钟前
C#字典(Dictionary)全面解析:从基础用法到实战优化
开发语言·c#·wpf·哈希算法·字典·dictionary·键值对
前端snow10 分钟前
在手机端做个滚动效果
前端
webkubor21 分钟前
🧠 2025:AI 写代码越来越强,但我的项目返工却更多了
前端·机器学习·ai编程
Sun_小杰杰哇25 分钟前
Dayjs常用操作使用
开发语言·前端·javascript·typescript·vue·reactjs·anti-design-vue
戴维南27 分钟前
TypeScript 在项目中的实际解决的问题
前端
晴殇i29 分钟前
package.json 中的 dependencies 与 devDependencies:深度解析
前端·设计模式·前端框架
雒珣30 分钟前
Qt简单任务的多线程操作(无需创建类)
开发语言·qt