问题描述：利用el-table实现拖拽列时，表头数据改变，但表头未重新渲染

排查了很久，后发现：在自定义表头的时候，由于是用的v-for循环生成的，因此会给每个循环体一个固定的key，导致数据频繁异步更新时，因为这个key没有变，所以el-table觉得表头数据是没有变化的，因此就只更新了整体表格数据、key值有变化的列的表头。

解决方案：

补充：

关于排序后，表头排序icon样式重置问题的解答：

先说下原理，用为key值的更新会导致表格重绘，因为没有记录sort排序的结果，重绘会将改变后的状态重置为初始状态，所以得记录重绘前的sort排序结果。

以下方法只适用于elementui的table组件：

将每次改变后的sort排序结果记录在sortObj中，拖拽排序后，将mykey赋随机值，使表格重绘（重绘后需重新挂载拖拽监听事件）。

//为table添加default-sort、@sort-change 以及 key 属性
<el-table ...其它属性 :default-sort="sortObj" @sort-change="handleChange" :key="mykey"></el-table>

//将el-table-column key属性值改为index
<el-table-column ...其它属性 v-for="(item, index) in columnList" :key="index"></el-table-column>

//data中新增sortObj与mykey属性
 data() {
    return {
      ...
      sortObj: {},
      mykey: "",
    };
  }

//methods中新增一方法
handleChange({ column, prop, order }) {
      this.sortObj = {
        prop,
        order,
      };
 },

//每次拖拽结束时调用
 reDrawTable() {
      this.mykey = Math.random();
      // 重新挂载拖拽监听
      this.$nextTick(() => {
        this.columnDrop();
        this.rowDrop();
      });
 },
   

总结：此方法可解决重绘引起的表头抖动以及表头排序icon样式重置的问题。

缺点：数据列过多，会引起大量的重绘操作。

若有更好的方案希望大佬们能分享出来。大家一起学习学习