记录一次el-table+sortablejs的拖拽bug
bug回顾
出现bug的情况时 当编辑表格过于紧凑的时候 有些非必要编辑或需要一眼看到的数据 移动到了el-table-column type=expand时 同事：怎么拖拽功能用不了了 ok开始检查代码
当原来是个简单的编辑表格 不涉及展开和简单拖拽时 不会出现问题
解决了 出现了展开行以后 拖拽索引的变动以及展开行被算作单独索引的问题
问题复盘
1. 同事：拖拽完以后 不能再拖拽了
测试后 发现报错了 出现了渲染报错的问题 检查sortable onEnd函数 发现插入了一个undefined数据 那就可能是expand行导致的 那我就优化一下 当拖拽的时候隐藏所有展开行 在onStart中加入代码
onEnd加入为空时不插入的代码
onStart() {for (let item of that.showTable) {that.$refs.table.toggleRowExpansion(item, false);}},
2.拖拽时隐藏展开行的时候 功能实现了 但是出现了展开位置变异的问题
向上拖拽隐藏 重渲染表格的时候出现 展开行跑到上面去了
开始检查问题 继续检查数据源看看有没什么问题 onEnd时打印出来 检查出来发现 走到了!currentRow
const currentRow = that.showTable.splice(oldIndex, 1)[0];if (!currentRow) return;
打印出来oldIndex=2 我就两条测试数据 所以 其实并没有触发正常的交换位置 仅仅只是sortable 自己把dom的位置交换了 我还纳闷了 为什么没有重新渲染 原来是索引出错了 我们估计还是把expand当作一行放进去了
那我们检查看dom 发现每个展开的行就是一个tr 那我们加上draggable为 .el-table__row试试
捶桌子 结果还是一样 那问题还是出在index上 打印evt出来 发现 果然还是这个问题 那我们就替换为drgaableIndex
let newIndex = newDraggableIndex;let oldIndex = oldDraggableIndex;// 删除当前行，放到拖拽后的位置const currentRow = that.showTable.splice(oldIndex, 1)[0];if (!currentRow) return;that.showTable.splice(newIndex, 0, currentRow);