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()
相关推荐
Freak嵌入式3 分钟前
MicroPython+Pico 接收空闲中断和发送空闲中断全实战
java·开发语言·stm32·单片机·嵌入式硬件
重生之小比特4 分钟前
【初阶C++】string
开发语言·c++
光影少年7 分钟前
react navite高频手写/实操题
前端·javascript·react native·react.js·前端框架
hunterandroid20 分钟前
HarmonyOS 弱网与离线优先架构实战:请求队列、本地缓存与增量同步
前端·前端框架
小玮看世界21 分钟前
[Python]动态规划三步走:从爬楼梯到打家劫舍,再到最大子数组和
开发语言·python·动态规划
lhldsg25 分钟前
宠物同城领养平台开发实战:从需求分析到上线部署指南
java·前端·小程序·需求分析·宠物
hunterandroid25 分钟前
Android 内存泄漏排查实战:从 LeakCanary 报警到根因定位
android·前端
AI视觉网奇26 分钟前
3d子部件高亮选中
开发语言·javascript·3d
leoZ23127 分钟前
AI+前端提效-12 AI辅助前端性能优化与监控:从开发到线上全流程提效
前端·人工智能·神经网络·自然语言处理·性能优化·keras·知识图谱
阿图灵29 分钟前
LangGraph 实战 03:Workflows 与 Agents——六种工作流模式与智能体实战(附 6 个可运行示例)
java·前端·javascript·工作流·ai agent·智能体·langgraph