Vue+el-table+sortable踩坑

1、拖拽后，同页面切换tab，表格数据更新，表头显示顺序有误（拖拽[1,2,3]➡[2,1,3]，更新后为[5,4,6]，应为[4,5,6]）

原代码
<el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"> 
</el-table-column>

原因：key值绑定固定，拖拽后不随表格更新

解决方案：:key="`col_${index}`" ➡ :key="item.value"

<el-table id="crTable" ref="multipleTable" ……>
    <el-table-column prop="name" label="name">
    </el-table-column>
    <el-table-column v-for="(item, index) in value" :key="item.value"
                    :prop="dropValue[index].value" :label="item.label"            
                    align="center">
    </el-table-column>
</el-table>

2、拖拽后改变表格列宽度，目标列宽度不变，原该位置的表格列宽度改变（拖拽[1,2,3]➡[2,1,3]，改变2宽度，2宽度不变，1宽度改变，即第一列宽度未改变，第二列宽度改变）

原因：表格未更新，property值仍为拖拽前绑定的值

解决方案：更改表格key值更新表格（因此可用dropValue一个数组设置表格列prop和label），并在$nextTick回调中重新调用create方法，否则property值更新但只能拖拽一次

<el-table id="crTable" ref="multipleTable" :key="tableKey" ……>
    <el-table-column prop="name" label="name">
    </el-table-column>
    <el-table-column v-for="(item, index) in dropValue" :key="item.value"
                     class-name="dropTableColumn"
                    :prop="item.value" :label="item.label" align="center">
    </el-table-column>
</el-table>
<script>
……
export default {
  data () {
    return {
      tableKey: 0,
    }
  },
  mounted () {
    this.tableKey = 0
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
    // 列拖拽
    columnDrop () {
      const wrapperTr = document.getElementById('crTable').querySelector('.el-table__header-wrapper tr')
      const _this = this
      this.sortableObj = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        ghostClass: 'column-ghost', // 停靠位置样式
        // dragClass: 'drag', // 拖动对象移动样式
        // chosenClass: 'chosen', // 选中样式
        // forceFallback: true, // 禁用html5原生拖拽行为
        draggable: '.dropTableColumn', // 指定可以拖动的元素
        // handle: '.dropText', // 指定拖拽句柄才能拖动父元素
        onEnd: evt => {
          const oldItem = _this.dropValue[evt.oldIndex]
          _this.dropValue.splice(evt.oldIndex, 1)
          _this.dropValue.splice(evt.newIndex, 0, oldItem)
          _this.tableKey += 1
          this.$nextTick(() => {
            this.rowDrop()
            this.columnDrop()
          })
        }
      })
    },
  },
}
</script>

3、改变表格列宽度时，该表格列会进入拖拽状态，其余表格列无法被拖动

原因：可拖拽区域与可改变宽度区域重叠

解决方案：探索中……