使用vue3在element plus中在el-table中拖拽

1.安装 vuedraggable

1
npm i -S vuedraggable

2.在使用的组件,引入sortablejs包含在vuedraggable

1
import Sortable from "sortablejs"

3.row-key 必须设置

1
2
3
4
5
6
7
<div class="list">
     <div class="f-j-b" style="padding-bottom: 10px;">
       <div>数据列表</div>
     </div>
     <el-table :data="tableData" border row-key="id">
       <el-table-column prop="name1" label="数据1" align="center" />
       <el-table-column prop="name2" label="数据2" align="center" /> <br>       <el-table-column prop="originalPrice" label="数据3" align="center" /><br>     </el-table><br>    </div>

4.在setup()中编写拖拽的逻辑,创建一个Sortable的实例,将需要拖拽的元素给到Sortable实例,进行需要的配置,然后在拖拽结束的方法onEnd()中实现改变排序的逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 表格行拖拽
  const rowDrop = () => {
    let tbody = document.querySelector(".el-table__body-wrapper tbody");
    Sortable.create(tbody, {
      group: { // 相同的组之间可以相互拖拽
        name: "table",
        pull: true,
        put: true,
      },
      animation: 150, // ms, number 单位:ms,定义排序动画的时间
      onAdd: function (e: any) {
        // 拖拽时候添加有新的节点的时候发生该事件
        console.log("onAdd.foo:", e);
      },
      onUpdate: function (e: any) {
        // 拖拽更新节点位置发生该事件
        console.log("onUpdate.foo:", e);
      },
      onRemove: function (e: any) {
        // 删除拖拽节点的时候促发该事件
        console.log("onRemove.foo:", e);
      },
      onStart: function (e: any) {
        // 开始拖拽出发该函数
        console.log("onStart.foo:", e);
      },
      onSort: function (e: any) {
        // 发生排序发生该事件
        console.log("onUpdate.foo:", e);
      },
      onEnd(e: any) {
        // 结束拖拽
        console.log("结束表格拖拽", e);
        // 如果拖拽结束后顺序发生了变化,则对数据进行修改
         if (e.oldIndex !== e.newIndex) {
              moveTable(e.oldIndex, e.newIndex) // 排序后和后端的交互函数
          }
      },
    });
  }

 参考:https://www.itxst.com/vue-draggable/tutorial.html

    https://blog.csdn.net/weixin_40449665/article/details/126160894

posted @   月下云生  阅读(4810)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
点击右上角即可分享
微信分享提示