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()
相关推荐
恋猫de小郭20 小时前
聊个比较有意思的 Flutter Web 问题
android·前端·flutter
IT_陈寒20 小时前
Redis持久化配置漏了这一步,线上数据丢了5小时
前端·人工智能·后端
吴声子夜歌20 小时前
Guava——反射
java·开发语言·guava
梦曦i20 小时前
create-uni-app v1.2.0:交互体验优化
前端·uni-app
Moment20 小时前
太好了!NestJS 12 大版本转向 ESM,新项目默认构建换 Rspack
前端·javascript·后端
lingran__20 小时前
Git 完全指南(三):远程仓库与标签管理
开发语言·git·gitee·ssh·团队协作·远程仓库·分布式版本控制
for_ever_love__20 小时前
python爬虫: 数据解析
开发语言·爬虫·python·xpath
Csvn20 小时前
泛型与条件类型:TypeScript 类型体操的核心
前端
涛涛ing20 小时前
一周之内,前端 AI 编程的格局被彻底改写了三次
前端·程序员
fxss20 小时前
免费儿童学习网站
前端