Vue2 el-table表格 sortablejs 行可托动排序

这是自定义指令式实现的，el-table行拖动排序功能。下边我直接粘贴出来代码

先安装    npm i sortablejs

1.创建 Tablerowdrag.js 文件，加入以下代码。

        /***
            * 表格行拖动
            *   

        tableData: [
                {
                id: 1,
                name: "张三",
                age: 10,
                },
                {
                id: 2,
                name: "王服",
                age: 120,
                },
            ],
            */
    
        const {Sortable} = require('sortablejs');  //模块中引入，使用import会报错
        module.exports={
            inserted:(el,binding,vnode)=>{
            const _this = vnode.context; 
            const tableData=binding.value //表格数据
            const tbody =el.getElementsByTagName('tbody')[0]
            
            Sortable.create(tbody, {
                onEnd({ newIndex, oldIndex }) {
                const currRow = tableData.splice(oldIndex, 1)[0];
                tableData.splice(newIndex, 0, currRow);
                },
            });
        }
        }

2. main.js 里边注册自定义指令

import Tablerowdrag from "./customInstruction/Tablerowdrag.js" //路径换成自己的路径

//设置 v-tablerowdrag 表格行拖动排序-自定义指令
Vue.directive("tablerowdrag", Tablerowdrag);

3. vue组件中

下边是演示，张三的位置改变了