《ElementUI/Plus 基础知识》el-table + sortablejs 实现 row 拖动改变顺序(Vue2/3适用)
前言
使用如下技术:
- 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;
// 获取移动的 item
const 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;
// 获取移动的 item
const dragItem = arr.splice(oldIndex, 1)[0];
// 插入新位置
arr.splice(newIndex, 0, dragItem);
}
});
}
},
mounted() {
this.$nextTick(()=>{
this.initDrag()
})
},
}
</script>