elementui的表格拖拽改变列宽后，后续列拖拽排序失效？

Question

在包含el-table的表格页面，mounted中执行下列函数，用户拖拽列排序（基于Sortable实现），这个功能没问题，但是现在需要使用自带的列属性resize来拖拽改变列宽，发现拖拽列改变宽度后，被拖拽列后续的所有列都无法拖动排序了，拖拽列前面的列仍可以拖拽排序，请问怎么回事？

    // 列拖拽排序
    handleColumnDrop() {
      // 要侦听拖拽响应的DOM对象
      const wrapperTr = document.querySelector(".el-table__header tr");
      const that = this;
      Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        handle: ".el-table__cell",
        filter: '.undrag', //过滤序号列（不能拖拽）
        onEnd: evt => {
          //省略排序逻辑
        },
        onMove: e => {
          
        },
      });
    }

解决方案：

//实例化之前先destroy()
this.sortableIns && this.sortableIns.destroy()
//实例化
this.sortableIns = Sortable.create()

Answer 1

第一种

首先尝试监听header-dragend事件并重新布局

methods: {
  handleHeaderDragend() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
      this.$forceUpdate();
    });
  }
}

第二种

1.手动移除transform样式：在onEnd事件中手动移除transform样式。
2.强制重新渲染：在列宽调整后强制重新渲染表格。

// 列拖拽排序
handleColumnDrop() {
  // 要侦听拖拽响应的DOM对象
  const wrapperTr = document.querySelector(".el-table__header tr");
  const that = this;
  Sortable.create(wrapperTr, {
    animation: 180,
    delay: 0,
    handle: ".el-table__cell",
    filter: '.undrag', // 过滤序号列（不能拖拽）
    onEnd: evt => {
      // 省略排序逻辑
      that.$nextTick(() => {
        that.$refs.table.doLayout();
        // 移除transform样式
        const headerCells = document.querySelectorAll(".el-table__header .el-table__cell");
        headerCells.forEach(cell => {
          cell.style.transform = '';
        });
      });
    },
    onMove: e => {
      // 省略其他逻辑
    },
  });
}

每次列拖拽排序结束后，onEnd事件会调用doLayout方法重新布局表格，并移除所有表头单元格的transform样式