elementUI Table组件实现拖拽效果

最新推荐文章于 2025-07-01 14:44:18 发布

唯一昵称真难

最新推荐文章于 2025-07-01 14:44:18 发布

阅读量2.6w

点赞数 5

CC 4.0 BY-SA版权

文章标签： Vue

本文链接：https://blog.youkuaiyun.com/qq_26440803/article/details/83663511

本文介绍如何使用ElementUI和Vue.Draggable实现表格拖拽功能，无需复杂逻辑处理，数据实时响应同步，完美兼容Vue双向绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

使用Element UI Table+Vue实现表格的拖拽。在GitHub上搜索了下发现Sortable这款插件挺不错的，Star14000+，而且还支持Vue等多种主流的前端框架，可谓是十分的强大。最重要的原因是，完全不依赖JQ。

Vue.Draggable，Vue版本的Sortable。拖拽后能够使数据模型同步，完美兼容Vue的数据视图双向绑定。

下面贴一下官方demo

看得出来真的很强大。数据实时的响应同步，结合Vue我们根本不需要对数据进行复杂的逻辑处理。

准备

安装依赖

npm i -S vuedraggable

vuedraggable依赖 Sortable.js，所以下载了vuedraggable，我们便可以直接引入Sortable使用Sortable的特性。
vuedraggable是Sortable一种加强，实现组件化的思想，可以结合Vue，使用起来更方便。

Sortable使用

在这里我们还是使用一句Sortable的构建方式

	import Sortable from 'sortablejs';

导入Sortable类，创建拖拽函数

  drag() {
        const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
        Sortable.create(el, {
            disabled: !this.enableDrag,
            ghostClass: 'sortable-ghost',
            setData: function(dataTransfer) {
                dataTransfer.setData('Text', '');
            },
            onEnd: (evt) => {
 				
            }
        });
    },