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

《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>

效果

在这里插入图片描述


http://www.kler.cn/a/311689.html

相关文章:

  • 【MATLAB代码】二维平面上的TDOA,使用加权最小二乘法,不限制锚点数量,代码可复制粘贴
  • 通过脚本,发起分支合并请求和打tag
  • 云计算:定义、类型及对企业的影响
  • 智慧仓储物流可视化平台
  • 速盾:游戏盾的功能和原理详解
  • vite构建的react程序放置图片
  • C++对C的扩充
  • 二百六十六、Hive——Hive的DWD层数据清洗、清洗记录、数据修复、数据补全
  • ros跨平台订阅和发布消息(ip如何设置)
  • Springboot的三层架构
  • ⭐ Unity + OpenCV 实现实时图像识别与叠加效果
  • HTML基础和常用标签
  • 【C++笔记】八、结构体 [ 3 ]
  • 如何着手创建企业数据目录?(一)数据目录的设定
  • python 实现area under curve曲线下面积算法
  • libserailport交叉编译适配说明
  • 胤娲科技:解锁AI奥秘——产品经理的智能进化之旅
  • 【每天学点AI】一个例子带你了解Python装饰器到底在干嘛!
  • C语言中的一些小知识(二)
  • Android 恢复挑战和解决方案:如何从 Android 设备恢复删除的文件
  • 算法题总结(三)——滑动窗口
  • MySql的基础讲解
  • Fisco Bcos 2.11.0配置console控制台2.10.0及部署调用智能合约
  • SpringAI-基于java大模型的胡言乱语
  • 正则表达式获取某些字段
  • docker快速搭建kafka