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()
相关推荐
一水几秒前
java运行排错,新码旧jar
java·开发语言·jar
海带紫菜菠萝汤22 分钟前
WebCodecs API 实战:浏览器原生视频编解码的原理与性能测试
前端·javascript·音视频·视频编解码
Python+9936 分钟前
Java 编程语言入门指南
java·开发语言
一位正在转型AI全栈的前端工程师38 分钟前
AI 全栈学习之旅 - Week2:从零搭建一个可部署的 AI 聊天应用
前端
程序喵大人1 小时前
【C++进阶】STL容器与迭代器 - 05 map 和 set 为什么按键保持有序
开发语言·c++·容器·迭代器·stl
aixingpan1 小时前
aixingpan.cn API开发文档:api_docs_trichart_natal_solararc_transit2接口指南
前端·php
Ayayoyo1 小时前
公平随机转盘的前端实现:Web Crypto API、拒绝采样与加权抽取
前端
完美火龙篇 四月的友1 小时前
SkillOpt 架构拆解:把 Skill 文本当参数,用执行轨迹训练 Agent
开发语言·php
GitLqr1 小时前
提升 Web 开发效率:我常用的 10 个 TypeScript 实战技巧
vue.js·react.js·typescript
冻柠檬飞冰走茶2 小时前
PTA基础编程题目集 7-15 计算圆周率(C语言实现)
c语言·开发语言·数据结构·算法