VUE + Element UI + Sortablejs插件 实现table列表 的 拖拽功能

背景：  

步骤： 

一、  导入  Sortablejs插件 

npm install sortablejs --save

二、在使用的页面中导入

import Sortable from 'sortablejs';

三、HTML代码：

<el-table :data="tableData"  row-key="id">
    <el-table-column 
        v-for="(item, index) in col"   
        :key="`col_${index}`"   
        :prop="col[index].prop"    
        :label="item.label"
        align="center"
    ></el-table-column>
</el-table>

备注：  

需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。但是不可用index，因为拖拽后index会变，会有问题。

四、JS代码:

<script>
import Sortable from "sortablejs"
export default {
    data() {
        return {
            dateQuery: '',
            col:[
                {label: '手机号',  prop: 'sjh' },
                {label: '姓名',  prop: 'name' },
                {label: '邮箱',  prop: 'youxiang' },
                {label: '参会单位',  prop: 'address' },
                {label: '职务',  prop: 'zhiwu' },
                {label: '所参会仪',  prop: 'suocanhuiyi' },
            ],
            dropCol:[
                {label: '手机号',  prop: 'sjh' },
                {label: '姓名',  prop: 'name' },
                {label: '邮箱',  prop: 'youxiang' },
                {label: '参会单位',  prop: 'address' },
                {label: '职务',  prop: 'zhiwu' },
                {label: '所参会仪',  prop: 'suocanhuiyi' },
            ],
            tableData: [{
                    sjh:'13856958563',
                    name: '王小虎1',
                    youxiang:'13856958563@163.com',
                    address: '北京市海阔天空有限公司',
                    zhiwu:'部门经理',
                    suocanhuiyi:'杂志社交流活动',
                }, {
                    sjh:'13856958563',
                    name: '王小虎2',
                    youxiang:'13856958563@163.com',
                    address: '北京市海阔天空有限公司',
                    zhiwu:'部门经理',
                    suocanhuiyi:'杂志社交流活动',
                },{
                    sjh:'13856958563',
                    name: '王小虎3',
                    youxiang:'13856958563@163.com',
                    address: '北京市海阔天空有限公司',
                    zhiwu:'部门经理',
                    suocanhuiyi:'杂志社交流活动',
                },{
                    sjh:'13856958563',
                    name: '王小虎4',
                    youxiang:'13856958563@163.com',
                    address: '北京市海阔天空有限公司',
                    zhiwu:'部门经理',
                    suocanhuiyi:'杂志社交流活动',
                },{
                    sjh:'13856958563',
                    name: '王小虎5',
                    youxiang:'13856958563@163.com',
                    address: '北京市海阔天空有限公司',
                    zhiwu:'部门经理',
                    suocanhuiyi:'杂志社交流活动',
                },{
                    sjh:'13856958563',
                    name: '王小虎6',
                    youxiang:'13856958563@163.com',
                    address: '北京市海阔天空有限公司',
                    zhiwu:'部门经理',
                    suocanhuiyi:'杂志社交流活动',
                },
                
            ],
        }
    },
    methods: {
        rowDrop () {
            // 此时找到的元素是要拖拽元素的父容器
            const tbody = document.querySelector('.el-table__body-wrapper tbody');
            const _this = this;
            let data = [];
            Sortable.create(tbody, {
                draggable: ".el-table__row",
                onEnd ({ newIndex, oldIndex }) {
                    // 将 拖拽后的列表信息 存到 data变量中
                    data = _this.tableData;
                }
            });
            // 将 data变量中的 信息 赋值给 tableData 重新渲染列表数据
            if(!data){
                this.tableData = data;
            }
            
        },
        // 列拖拽
        columnDrop () {
            const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
            this.sortable = Sortable.create(wrapperTr, {
                animation: 180,
                delay: 0,
                onEnd: evt => {
                    const oldItem = this.dropCol[evt.oldIndex];
                    this.dropCol.splice(evt.oldIndex, 1);
                    this.dropCol.splice(evt.newIndex, 0, oldItem);
                }
            });
        }
    },
    mounted () {
        this.rowDrop();
        this.columnDrop();
    },
    created(){
    },
}
</script>

备注：

如果 不需要 列拖拽功能，可以按照传统样式定义table列表，col、dropCol属性 及 columnDrop()  函数 可以删掉

 页面效果：

拖拽前：

行 拖拽后：