基于element UI 实现 table 列 拖拽

问题描述

在开发中遇到一个需求，即实现table列的拖拽，但是调研发现，大部分是基于sorttable.js这个包实现的，但是通过实际应用，发现sorttable.js用在操作element table 组件中并不是很舒服，总会莫名其妙的冒出一些异常bug，于是自行封装一个table 列拖拽组件。

难点概括

①element table header插槽应用

②drag知识点应用

③splice()方法理解

演示代码

table 列 拖拽组件实现代码

然后我在操作的时候碰到一个报错

[Violation ] Added non-passive event listener to ascroll- blocking 'mousewheel’event Consider marking event handler as ’ passive’to make the page more responsive. See https: com/feature/574554 3795965952

翻译：

[冲突]在ascroll中添加了非被动事件侦听器-阻塞“mousewheel”事件考虑将事件处理程序标记为“passive”，以使页面更具响应性。参见https:com/feature/574554 3795965952

解决办法：

npm i default-passive-events -S
main.js import 'default-passive-events'

最后

该组件目前仅支持最简单的拖拽效果，后续开发出兼容fixed、checkbox、expand 以及操作列的组件会及时更新文章，有兴趣的朋友可以点赞收藏。

参考文献

基于element UI 实现 table 列 拖拽_element table列拖拽_淡然自若_blog的博客-CSDN博客

Added non-passive event listener to ascroll- blocking ‘mousewheel‘event Consider marking event handl_绅士的可怖的博客-CSDN博客