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()
相关推荐
liwulin05067 小时前
【PYTHON】使用Selenium + ChromeDriver以及XPATH语法
开发语言·python·selenium
JavaPub-rodert7 小时前
我又把自己的 Go 后台管理系统升级了一遍:文件管理、2GB 上传、私有文件预览、Docker 镜像全安排上了
开发语言·docker·golang·shiyuadmin
动力 continue7 小时前
Python 元类与异常类:类的“制造工厂”与“报错定制师”
开发语言·python·制造
quantdash_cc7 小时前
基于 QuantDash 5 分钟 K 线的网格交易策略参数网格搜索寻优实战
android·开发语言·pandas·量化·quantdash
雪隐7 小时前
个人电脑玩AI-16让5060 Ti给你打工——MiniMax H3 提速实录:从"泡杯茶等视频"到"视频等你",一张 5060 Ti 的自我修养
前端·人工智能·后端
147API7 小时前
Python批量生成蒸馏数据,并发、重试、幂等和断点续跑
开发语言·jvm·python
青 春 记 忆7 小时前
零基础入门python04:用注册校验理解字典、集合和条件判断
开发语言·vscode·python·python3.11
kels88997 小时前
实战排坑:黄金实时API开发,XAUUSD Tick报文异常处理实践
开发语言·python·websocket·网络协议·信息可视化
阿pin7 小时前
Java随笔-JDK7 HashMap头插法为何能导致死循环?
java·开发语言·hashmap
FBI HackerHarry浩7 小时前
Pandas 库中用于分类变量独热编码(One-Hot Encoding)的函数 pd.get_dummies() 函数
开发语言·人工智能·python·pandas