VUE在项目中使用sortable.js实现el-table表格拖拽，并重新排序

// 拖拽主函数写在method()里。
        // 行拖拽
        dragRow() {
            // 查找要拖拽元素的父容器 ，给你的表格所在的父级页面元素加一个自定义类名 比如dictItemList
            const tbody = document.querySelector('.dictItemList tbody');
            const _this = this;
            Sortable.create(tbody, {
                draggable: ' .el-table__row', //  指定父容器下可被拖拽的子元素
                onEnd({ newIndex, oldIndex }) {
                    /**
                     * onEnd 拖拽结束后的事件处理函数
                     * newIndex：目标位置对应行的索引
                     * oldIndex：被拖拽行的索引
                     *
                     * ====================（被拖拽记录行1）
                     * before
                     * ====================(拖拽至目标位置对应记录行)
                     * after
                     * ====================（被拖拽记录行2）
                     * 如果从上往下拖拽，即newIndex > oldIndex，那么在目标位置对应记录行上移(目标位置对应记录行索引值减1)，在newIndex所指位置插入被拖拽行(被拖拽行索引设置为newIndex)，视觉效果就是在after位置(即目标位置对应行下方)插入被拖拽行
                     * 如果从下往上拖拽，即newIndex < oldIndex，那么在目标位置对应记录行下移(目标位置对应记录行索引值加1)，在newIndex所指位置插入被拖拽行(被拖拽行索引设置为newIndex)，视觉效果就是在上述before位置(即目标位置对应行上方)插入被拖拽行
                     * */
                    var sendData = [];
                    //如果人把行从上往下拉
                    if (newIndex > oldIndex) {
                        // 排序值改变算法如下
                        let temp = _this.ItemData[newIndex].sort;
                        for (let i = newIndex; i > oldIndex; i--) {
                            _this.ItemData[i].sort = _this.ItemData[i - 1].sort;
                        }
                        _this.ItemData[oldIndex].sort = temp;
                        //取改变了索引的数据列表
                        var shortData = _this.ItemData.slice(oldIndex, newIndex + 1);
                        sendData = [];
                        //取关键词和排序词
                        for (let m = 0; m < shortData.length; m++) {
                            let obj = {
                                typeCode: shortData[m].typeCode,
                                dictCode: shortData[m].dictCode,
                                sort: shortData[m].sort
                            };
                            sendData.push(obj);
                        }
                        //请求服务器作出数据处理，后端改变排序的值
                        api.moveDictItemUpdateSort(sendData, response => {
                            if (response.data.statusCode === 'API-COMMON-INF-OK') {
                            	//调用查询，重新查数据，返回排序后的数据回显
                                _this.getFreshData();
                            } else {
                                _this.$message.error('排序更新失败');
                            }
                        });
                        sendData = [];
                    }
                    //人把行从下往上拉
                    if (newIndex < oldIndex) {
                        //排序值算法2
                        let temp2 = _this.ItemData[newIndex].sort;
                        for (let j = newIndex; j < oldIndex; j++) {
                            _this.ItemData[j].sort = _this.ItemData[j + 1].sort;
                        }
                        _this.ItemData[oldIndex].sort = temp2;
                        // 请求服务器做数据更新处理 ，然后根据处理结果对前端页面处理
                        shortData = _this.ItemData.slice(newIndex, oldIndex + 1);
                        sendData = [];
                        for (let n = 0; n < shortData.length; n++) {
                            let obj = {
                                typeCode: shortData[n].typeCode,
                                dictCode: shortData[n].dictCode,
                                sort: shortData[n].sort
                            };
                            sendData.push(obj);
                        }
                        api.moveDictItemUpdateSort(sendData, response => {
                            if (response.data.statusCode === 'API-COMMON-INF-OK') {
                                _this.getFreshData();
                            } else {
                                _this.$message.error('排序更新失败');
                            }
                        });
                        sendData = [];
                    }
                }
            });
        },

2.table里面一定要加一个属性 row-key=“dictCode”，不然你拉了之后div不会回归顺序，后端就算排好，你前端也会乱。
3.从后端获取数据函数getFreshData()函数刷新表格，里面一定要加一个
this.$nextTick(() => {
this.dragRow();
});
来触发，不然你就只能自定义按钮来触发拖动了。
4.去写后端代码，用CASE WHEN批量更新数据库或者使用循环SQL即可。
一个拖动功能前后端逻辑就算写好了。