《ElementUI/Plus 基础知识》el-table + sortablejs 实现 row 拖动改变顺序(Vue2/3适用)

ops/2024/9/23 4:52:14/

前言

使用如下技术：

ElementPlus Table 组件；
插件 sortablejs （ npmjs/Github 地址）；

实现

html

代码第 1 行，属性 row-key 一定要设置，否则会报错。即行数据的 Key，用来优化 table 的渲染；
如果想看效果，请异步《ElementUI/Plus 踩坑》el-table + sortablejs 拖拽顺序错乱；

<el-table class="my-table" :data="tableData" style="width: 100%" row-key="id"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" />
</el-table>

JavaScript

代码第 1 行，引入插件 sortablejs；
代码第 3 行，获取标签 tbody，注意是表格 row 元素列表的上一级；
代码第 6 行，监听 row 元素拖动结束事件 onEnd。且获取元素的原始索引 oldIndex 和 新索引 newIndex；
代码第 9 - 12 行，原始数据不会修改，所以要在此修改；

import Sortable from 'sortablejs'const el = document.querySelector('.my-table tbody');
const that = this;
Sortable.create(el, {onEnd({ newIndex, oldIndex }) {let arr = that.tableData;// 获取移动的 itemconst dragItem = arr.splice(oldIndex, 1)[0];// 插入新位置arr.splice(newIndex, 0, dragItem);}
});

完成代码

<template><el-table class="my-table" :data="tableData" style="width: 100%" row-key="id"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></template><script>
import Sortable from 'sortablejs'
export default {data() {return {tableData: [{id: 'ID_001',date: '2004-01-01',name: 'Tom11111',address: 'No. 001, Grove St, Los Angeles',},{id: 'ID_002',date: '2014-01-02',name: 'Tom22222',address: 'No. 002, Grove St, Los Angeles',},{id: 'ID_003',date: '2024-01-03',name: 'Tom33333',address: 'No. 003, Grove St, Los Angeles',},{id: 'ID_004',date: '2034-01-04',name: 'Tom44444',address: 'No. 004, Grove St, Los Angeles',},{id: 'ID_005',date: '2044-01-05',name: 'Tom55555',address: 'No. 005, Grove St, Los Angeles',},{id: 'ID_006',date: '2054-01-06',name: 'Tom66666',address: 'No. 006, Grove St, Los Angeles',},]}},methods: {  initDrag() {const el = document.querySelector('.my-table tbody');const that = this;Sortable.create(el, {onEnd({ newIndex, oldIndex }) {let arr = that.tableData;// 获取移动的 itemconst dragItem = arr.splice(oldIndex, 1)[0];// 插入新位置arr.splice(newIndex, 0, dragItem);}});}},mounted() {this.$nextTick(()=>{this.initDrag()})},
}
</script>