最近要实现el-table的树状结构的列表拖拽功能
第一步：安装sortablejs
npm install sortablejs --save
第二步：在需要的页面引入
import Sortable from 'sortablejs'
第三步：表格样式布局
<el-table:data="treeTableData"ref="dragTable"class="draggable"row-key="id"borderhighligh-current-row:expand-row-keys="treeTableExpandKeys"@expand-change="treeTableExpandChange"@selection-change="handleSelectionChange"default-expand-all><el-table-column type="selection" width="55" :selectable="selectableMethod" /><el-table-column prop="date" label="Date" /><el-table-column prop="name" label="Name" /><el-table-column prop="address" label="Address" /><el-table-column prop="handel" label="排序"><template #default="{}"><el-icon class="drag-hander" :size="20"><Rank /></el-icon></template></el-table-column></el-table>
第四步：数组定义
data() {return {treeTableData: [{id: 1,date: '2016-05-02',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',},{id: 2,date: '2016-05-04',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',},{id: 3,date: '2016-05-01',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',children: [{id: 31,date: '2016-05-06',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',children: [{id: 33,date: '2016-05-08',name: 'LIDAHAI',address: 'No. 189, Grove St, Los Angeles',},{id: 34,date: '2016-05-09',name: 'WANGJIUN',address: 'No. 189, Grove St, Los Angeles',},],},{id: 32,date: '2016-05-07',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',},],},{id: 4,date: '2016-05-03',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',},],treeProps: { checkStrictly: false, children: 'children', hasChildren: 'hasChildren' },flatTreeData: [],treeTableExpandKeys: [],sortableObj: null,};},
第五步：初始化方法
mounted() {this.transverseNode(this.treeTableData, 1, (node, level, parentNode) => {node.level = level;node.parentId = parentNode ? parentNode.id : -1;});this.initSortable();this.getFlatNode(this.treeTableData, this.flatTreeData);},
第六步：方法
methods: {initSortable() {const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');if (!tbody) {return;}Sortable.create(tbody, {// Sortable 配置项draggable: '.draggable .el-table__row',onEnd: this.handleSortEnd, // 处理拖拽结束后的逻辑});},handleSortEnd(event) {if (event.oldIndex !== undefined && event.newIndex !== undefined) {// const { oldIndex, newIndex } = event;// const movedItem = this.tableData.splice(oldIndex, 1)[0];// this.tableData.splice(newIndex, 0, movedItem);const { newIndex, oldIndex } = event;const dragRow = this.flatTreeData[oldIndex];const relatedRow = this.flatTreeData[newIndex];if (dragRow.parentId !== relatedRow.parentId) {this.$message.warning('只能同层级内排序');this.reRender(null, 'treeTableData');} else {// 都无childrenif (!dragRow.children && !relatedRow.children) {const oldData = this.flatTreeData.splice(oldIndex, 1)[0];this.flatTreeData.splice(newIndex, 0, oldData);}// drag有, relate无if (dragRow.children && !relatedRow.children) {const oldData = this.flatTreeData.splice(oldIndex, 1)[0];this.flatTreeData.splice(newIndex, 0, oldData);if (newIndex < oldIndex) {// 有子元素的，子元素需要同样跟上来const flatChildren = [];this.getFlatNode(oldData.children || [], flatChildren);if (flatChildren.length > 0) {for (let i = 1, len = flatChildren.length; i <= len; i++) {const childData = this.flatTreeData.splice(oldIndex + i, 1)[0];this.flatTreeData.splice(newIndex + i, 0, childData);}}} else {// 有子元素的，子元素需要同样跟下来const flatChildren = [];this.getFlatNode(oldData.children || [], flatChildren);if (flatChildren.length > 0) {for (let i = 1, len = flatChildren.length; i <= len; i++) {const childData = this.flatTreeData.splice(oldIndex, 1)[0];this.flatTreeData.splice(newIndex, 0, childData);}}}}// drag无, relate有if (!dragRow.children && relatedRow.children) {const oldData = this.flatTreeData.splice(oldIndex, 1)[0];this.flatTreeData.splice(newIndex, 0, oldData);if (newIndex > oldIndex) {// 有子元素的，子元素需要同样跟上来const flatChildren = [];this.getFlatNode(relatedRow.children || [], flatChildren);if (flatChildren.length > 0) {for (let i = 1, len = flatChildren.length; i <= len; i++) {const childData = this.flatTreeData.splice(newIndex + i, 1)[0];this.flatTreeData.splice(newIndex + i - 1, 0, childData);}}}}// drag有, relate有if (dragRow.children && relatedRow.children) {if (newIndex < oldIndex) {const oldData = this.flatTreeData.splice(oldIndex, 1)[0];this.flatTreeData.splice(newIndex, 0, oldData);// 有子元素的，子元素需要同样跟上来const flatChildren = [];this.getFlatNode(oldData.children || [], flatChildren);if (flatChildren.length > 0) {for (let i = 1, len = flatChildren.length; i <= len; i++) {const childData = this.flatTreeData.splice(oldIndex + i, 1)[0];this.flatTreeData.splice(newIndex + i, 0, childData);}}} else {const oldData = this.flatTreeData.splice(oldIndex, 1)[0];// relateRow的children数const relateFlatChildren = [];this.getFlatNode(relatedRow.children || [], relateFlatChildren);this.flatTreeData.splice(newIndex + relateFlatChildren.length, 0, oldData);// 有子元素的，子元素需要同样跟下来const flatChildren = [];this.getFlatNode(oldData.children || [], flatChildren);if (flatChildren.length > 0) {for (let i = 1, len = flatChildren.length; i <= len; i++) {const childData = this.flatTreeData.splice(oldIndex, 1)[0];this.flatTreeData.splice(newIndex + relateFlatChildren.length, 0, childData);}}}}// 重新生成树的数据const data = this.getTreeData(this.flatTreeData, []);console.log('this.flatTreeData', this.flatTreeData, data);// 页面重新渲染this.reRender(data, 'treeTableData');}}},getFlatNode(nodes, flatList, childrenKey = 'children') {nodes.forEach(node => {flatList.push(node);if (node[childrenKey] && node[childrenKey].length) {this.getFlatNode(node[childrenKey], flatList);}});},getTreeData(nodes, resultList) {const childStack = [];let lastNode = {};nodes.forEach(node => {delete node.children;const pushNode = dataNode => {const parentNode = childStack[childStack.length - 1];if (parentNode) {parentNode.children.push(dataNode);} else {resultList.push(dataNode);}};if (node.level < lastNode.level) {childStack.length = node.level - 1;pushNode(node);} else if (node.level === lastNode.level) {pushNode(node);} else if (node.level > lastNode.level) {if (!lastNode.children) {lastNode.children = [];}childStack.push(lastNode);pushNode(node);} else {resultList.push(node);}lastNode = node;});return resultList;},reRender(data, dataKey) {if (data) {this[dataKey] = [];this.$nextTick(() => {this[dataKey] = data;});} else {const origin = [].concat(this[dataKey]);this[dataKey] = [];this.$nextTick(() => {this[dataKey] = origin;});}},transverseNode(nodes, level = 1, cb, parentNode, childKey = 'children') {nodes.forEach(node => {if (node[childKey] && node[childKey].length > 0) {this.transverseNode(node[childKey], level + 1, cb, node, childKey);}cb(node, level, parentNode);});return nodes;},treeTableExpandChange(row, expanded) {if (expanded) {this.treeTableExpandKeys.push(row.id);} else {const idx = this.treeTableExpandKeys.indexOf(row.id);this.treeTableExpandKeys.splice(idx, 1);}},handleSelectionChange(selection){console.log(selection); // 已选择的行数据数组},selectableMethod(row, index){return row.id > 0 ? true:false;}},
第七步:移除
beforeDestroy() {if (this.sortableObj) {this.sortableObj.destroy();}},
参考链接：
https://blog.csdn.net/jianjian_19/article/details/120313084
https://www.jb51.net/javascript/31103517b.htm