当前位置：首页 > article >正文

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

article 2024/9/20 10:00:38

前言

使用如下技术：

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>