记录一次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);

问题圆满解决