以 Element 树表格为例，实现了树表格的同级之间排序（跨级也有代码，但还有问题）

踩坑点：

onMove回调中 oldIndex 会随时变化，若想拿到最开始拖动的Row，需要使用onChoose 。
在onChoose需将 oldIndex 或者 oldRow 存储一下，供后续onMove和onEnd使用。
onMove 中可以使用return false 阻止拖动
因为是树形结构，所以回调中返回的 Index 并不准确，所以要预先在onChoose 时将树数据扁平化，才能根据返回的Index获取到对应的Row。
拖动结束更改树表格源数据，虽然数据有更改，但视图可能会乱掉，所以要使用nexttick 更新数据
更新数据后默认树会缩合，所以要设置需要展开的节点

上代码

<el-tableref="ruleSelectTableRef"v-loading="isLoading"row-key="ruleTagId":data="tableData"border:max-height="500"
><el-table-column label="" width="45"></el-table-column><el-table-column width="40" :render-header="selectAllHeaderRender"><template slot-scope="scope"><el-checkboxv-model="scope.row.isSelected":disabled="scope.row.isDisabled"@change="val => selectRow(val, scope.row)"></el-checkbox></template></el-table-column><el-table-column label="设备类" prop="packageName"></el-table-column><el-table-column label="操作" prop="handles" width="80" fixed="right"><template slot-scope="scope"><el-buttonv-if="scope.row.level !== 1"type="text":class="{ 'text-btn-red': scope.row.compareOnline }"@click="showLogModule(scope.row)">查看日志</el-button></template></el-table-column>
</el-table>import Sortable from 'sortablejs';
import { deepClone } from '@/utils/util';
import { nextTick } from 'process';private selectedTableData: IListRuleCollectionRuleSelectInfo[] = [];
private flatSelectedTableData: any[] = [];
private drawOldIndex: any = -1;// 将树数据转化为平铺数据
flatTreeData(treeData: any[], childKey = 'children') {const arr: any[] = [];const expanded = (data: any) => {if (data && data.length > 0) {data.filter((d: any) => d).forEach((e: any) => {arr.push(e);expanded(e[childKey] || []);});}};expanded(treeData);return arr;
}// 行拖拽
rowDrop() {// 此时找到的元素是要拖拽元素的父容器const tbody = document.querySelector('#selected-table .el-table__body-wrapper tbody');const that = this;Sortable.create(tbody, {// 指定父元素下可被拖拽的子元素draggable: '.el-table__row',setData: function (dataTransfer: any) {dataTransfer.setData('Text', '');},onChoose({ oldIndex }: any) {// 把树形的结构转为列表再进行拖拽that.$set(that, 'flatSelectedTableData', that.flatTreeData(that.selectedTableData));that.drawOldIndex = oldIndex;},onMove({ related }: any) {const oldRow: any = that.flatSelectedTableData[that.drawOldIndex];const newRow: any = that.flatSelectedTableData[related.rowIndex];// if (!newRow || !newRow.id || !oldRow || !oldRow.id) return false;// 拖动的是一个包if (oldRow.level === 1) {if (newRow.level === 1 && oldRow.id === newRow.id) return false;// 还在自己的包里面if (oldRow.rulePackageId === newRow.newPackageId) return false;} else {// 不是包不可以挪到最上面if (related.rowIndex === 0) return false;// 跨包不允许if (oldRow.newPackageId !== newRow.newPackageId || newRow.level === 1) return false;}},onEnd({ newIndex, oldIndex }: any) {if (oldIndex !== newIndex) {const oldRow: any = that.flatSelectedTableData[oldIndex];const newRow: any = that.flatSelectedTableData[newIndex];const selectedTableData = deepClone(that.selectedTableData);that.selectedTableData = [];const expansionRowKey: any[] = [];// 拖动的是一个包if (oldRow.level === 1) {expansionRowKey.push(oldRow.id);// 找到拖动的这个包const currPackageIndex = selectedTableData.findIndex((p: any) => p.id === oldRow.id);// 找到新包的位置塞进去// 新位置是一个包的位置 (包 -> 包)if (newRow.level === 1) {const newPackageIndex = selectedTableData.findIndex((p: any) => p.id === newRow.id);const currPackage = selectedTableData.splice(currPackageIndex, 1)[0];selectedTableData.splice(newPackageIndex, 0, currPackage);expansionRowKey.push(newRow.id);// 新位置是一个行的位置 (包 -> 行)} else {// 找到这个行的父级包const newPackageIndex = selectedTableData.findIndex((p: any) => p.newPackageId === newRow.newPackageId);// 删掉原来的包，放到新包的后面const currPackage = selectedTableData.splice(currPackageIndex, 1)[0];selectedTableData.splice(newPackageIndex, 0, currPackage);expansionRowKey.push(selectedTableData[newPackageIndex].id);}// 拖动的是一个行} else {// 新目标是一个包 (行 -> 包)if (newRow.level === 1) {expansionRowKey.push(newRow.id);// 如果还是原来的包（包内排序移到开头）if (oldRow.newPackageId === newRow.newPackageId) {// 找到当前包位置const newPackageIndex = selectedTableData.findIndex((p: any) => p.id === newRow.id);const currPackage = selectedTableData[newPackageIndex];expansionRowKey.push(currPackage.id);const currPackageChildren = currPackage?.children || [];// 找到拖动的行在children 中的 indexconst currRuleIndex = currPackageChildren.findIndex((rule: any) => rule.ruleTagId === oldRow.ruleTagId);const currRule = currPackageChildren.splice(currRuleIndex, 1)[0];// 放到最开头currPackageChildren.splice(0, 0, currRule);currPackage.children = currPackageChildren;// 替换掉原来的包selectedTableData.splice(newPackageIndex, 1, currPackage);// 如果在另外一个包开头(废弃，目前不允许，还有问题)} else {return false;// 找到旧包// const oldPackageIndex = selectedTableData.findIndex((p: any) => p.newPackageId === oldRow.newPackageId);// const oldPackage = selectedTableData[oldPackageIndex];// expansionRowKey.push(oldPackage.id);// const oldPackageChildren = oldPackage?.children || [];// // 删掉旧包中的 old rule// const oldRuleIndex = oldPackageChildren.findIndex((rule: any) => rule.ruleTagId === oldRow.ruleTagId);// const oldRule = oldPackageChildren.splice(oldRuleIndex, 1)[0];// // 找到新包// const newPackageIndex = selectedTableData.findIndex((p: any) => p.id === newRow.id);// const newPackage = selectedTableData[newPackageIndex];// const newPackageChildren = newPackage?.children || [];// // 新包中增加 该 rule// newPackageChildren.splice(0, 0, oldRule);// // 覆盖原包// oldPackage.children = oldPackageChildren;// newPackage.children = newPackageChildren;// selectedTableData.splice(oldPackageIndex, 1, oldPackage);// selectedTableData.splice(newPackageIndex, 1, newPackage);}// 新位置是一个行的位置 (行 -> 行)} else {// 还在原来的包内（包内排序）if (oldRow.newPackageId === newRow.newPackageId) {// 找到当前包位置const newPackageIndex = selectedTableData.findIndex((p: any) => p.newPackageId === newRow.newPackageId);const currPackage = selectedTableData[newPackageIndex];expansionRowKey.push(currPackage.id);const currPackageChildren = currPackage?.children || [];// 找到拖动的行在children 中的 indexconst oldRuleIndex = currPackageChildren.findIndex((rule: any) => rule.ruleTagId === oldRow.ruleTagId);// 找到将要排序到的目标位置const newRuleIndex = currPackageChildren.findIndex((rule: any) => rule.ruleTagId === newRow.ruleTagId);// 排序const oldRule = currPackageChildren.splice(oldRuleIndex, 1)[0];currPackageChildren.splice(newRuleIndex, 0, oldRule);currPackage.children = currPackageChildren;// 替换掉原来的包selectedTableData.splice(newPackageIndex, 1, currPackage);// 在另外一个包内(废弃，目前不允许，还有问题)} else {return false;// 找到旧包// const oldPackageIndex = selectedTableData.findIndex((p: any) => p.newPackageId === oldRow.newPackageId);// const oldPackage = selectedTableData[oldPackageIndex];// expansionRowKey.push(oldPackage.id);// const oldPackageChildren = oldPackage?.children || [];// // 删掉旧包中的 old rule// const oldRuleIndex = oldPackageChildren.findIndex((rule: any) => rule.ruleTagId === oldRow.ruleTagId);// // 找到新包// const newPackageIndex = selectedTableData.findIndex((p: any) => p.newPackageId === newRow.newPackageId);// const newPackage = selectedTableData[newPackageIndex];// expansionRowKey.push(newPackage.id);// const newPackageChildren = newPackage?.children || [];// // 找到 newRule 在 新包中的 index// const newRuleIndex = newPackageChildren.findIndex((rule: any) => rule.ruleTagId === newRow.ruleTagId);// const oldRule = oldPackageChildren.splice(oldRuleIndex, 1)[0];// // 新包中增加 该 rule// newPackageChildren.splice(newRuleIndex, 0, oldRule);// // 覆盖原包// oldPackage.children = oldPackageChildren;// newPackage.children = newPackageChildren;// selectedTableData.splice(oldPackageIndex, 1, oldPackage);// selectedTableData.splice(newPackageIndex, 1, newPackage);}}}that.$nextTick(() => {that.selectedTableData = selectedTableData;that.$nextTick(() => {that.selectedTableData.forEach((item: any) => {if (expansionRowKey.includes(item.id)) {(that.$refs.ruleSelectedTableRef as any).toggleRowExpansion(item, true);}});});});}},});
}

觉得有帮助的小伙伴记得点个赞鼓励下~

扫描上方二维码关注我的订阅号~

踩坑日记 - Sortable 拖动树表格排序相关推荐

【踩坑日记】阿里云表格存储
1. 禁用主键列的自增列功能!禁用主键列的自增列功能!!禁用主键列的自增列功能!!!重要的事情要说三遍 2. 自增列一旦设置,无法人为填充,只能依赖表格存储的自增功能,所以建议使用自定义发号器 3. ...
全志哪吒D1-H Tina Linux Ubuntu 22.04入门踩坑日记
哪吒D1-H Tina Linux入门踩坑日记系统环境源码编译 mklibs-readelf的C++标准问题 m4的SIGSTKSZ问题 libfakeroot的_STAT_VER问题 read_ ...
Antd Pro V4 protable详解（ps:踩坑日记）
Antd Pro V4 protable详解(ps:踩坑日记) 写在前面: 在这篇文章中,你会了解到: protable 中的cloumns属性详解 protable数据加载和处理(两种方法,直接使用 ...
Win11 + Ubuntu18.04 双系统踩坑日记
Win11 + Ubuntu18.04 双系统踩坑日记前言准备工作硬件配置镜像下载 Win11镜像下载 Ubuntu镜像下载启动盘准备 Win11启动盘 Ubuntu启动盘 Win11安装 ...
【Flutter混合开发踩坑日记之‘applicationVariants‘ for extension ‘android‘】
Flutter混合开发踩坑日记之'applicationVariants' for extension 'android' 正文坑一:Could not get unknown property ' ...
Swarm-BZZ踩坑日记之如何让METMASK小狐狸显示gbzz
刚入门bzz的新手还不知道小狐狸是什么的请移步上一章节:Swarm-BZZ踩坑日记之如何在METMASK小狐狸导入节点地址在浏览器安装好小狐狸,并添加自己的钱包地址后会发现只显示ETH,并不显示 ...
ReactNative 在丁香医生项目中引入的踩坑日记
ReactNative 在丁香医生项目中引入的踩坑日记 this没绑定到函数导致空指针参考 React-Native 踩坑第二弹-undefined is not a function(evalua ...
springboot踩坑日记—nacos: Error watching Nacos Service change
springboot踩坑日记-nacos: Error watching Nacos Service change Spring Boot :: (v2.1.5.RELEASE) 错误代码: 07-3 ...
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...

踩坑日记 - Sortable 拖动树表格排序

踩坑点：

上代码

觉得有帮助的小伙伴记得点个赞鼓励下~

扫描上方二维码关注我的订阅号~

踩坑日记 - Sortable 拖动树表格排序相关推荐

最新文章

热门文章