vue动态隐藏显示表的列数据，然后现在加入sortableJs来实现列拖拽后出现表头表单内容错误，改如何解决？

Question

现在的话单个功能随便怎么点击都是能用的，但是要是拖动之后再去隐藏列以及重新显示出隐藏列的话，这时候就会出现表头和表数据对不上的情况，请问哪位大神有遇到过这个问题或者有解决的方法，代码如下

表单列表：

<!-- 列表 -->
<el-table style="width: 100%" border :data="list" row-key="id">
  <template v-for="(item,index) in tableHead">
    <el-table-column :prop="dropTableHead[index].column_name"
    class-name="allowDrag"
    :label="item.column_comment"
    :key="`col_${index}`"
    :min-width="dropTableHead[index].width"
    v-if="dropTableHead[index].istrue"
    align="center"
    sortable>
    </el-table-column>
  </template>
  <el-table-column align="center" label="操作" width="200">
    <template slot-scope="scope">
      <el-button type="primary" size="mini" @click="handleUpdate(scope.row.id)">
        修改
      </el-button>
      <el-button type="danger" size="mini" @click="deleteData(scope.row.id)">
        删除
      </el-button>
    </template>
  </el-table-column>
</el-table>
**data数据**
//表头数据
    tableHead:[
        { column_name: 'id', column_comment: '用户号', type:"string", width: 180, istrue: true},
        { column_name: 'username', column_comment: '用户名', type:"string", width: 150, istrue: true},
        { column_name: 'name', column_comment: '用户姓名', type:"string", width: 150, istrue: true},
        { column_name: 'mobile', column_comment: '手机号', type:"string", width: 150, strue: true},
        { column_name: 'updatedTime', column_comment: '修改时间', type:"datetime", width: 160, istrue: true},
        { column_name: 'updatedBy', column_comment: '修改人', type:"string", width: 110, istrue: true},
        { column_name: 'createdTime', column_comment: '创建时间', type:"datetime", width: 160, istrue: true},
        { column_name: 'createdBy', column_comment: '创建人',type:"string", width: 110, istrue: true}
    ],
    //拖动所需要的th和td
    dropTableHead:[
        { column_name: 'id', column_comment: '用户号', type:"string", width: 180, istrue: true},
        { column_name: 'username', column_comment: '用户名', type:"string", width: 150, istrue: true},
        { column_name: 'name', column_comment: '用户姓名', type:"string", width: 150, istrue: true},
        { column_name: 'mobile', column_comment: '手机号', type:"string", width: 150, strue: true},
        { column_name: 'updatedTime', column_comment: '修改时间', type:"datetime", width: 160, istrue: true},
        { column_name: 'updatedBy', column_comment: '修改人', type:"string", width: 110, istrue: true},
        { column_name: 'createdTime', column_comment: '创建时间', type:"datetime", width: 160, istrue: true},
        { column_name: 'createdBy', column_comment: '创建人',type:"string", width: 110, istrue: true}
    ],
    //导入
    upLoadModel:[ 'username','name','password','roleIds','description','mobile'],
    upLoadFileVisible : false,
    colOptions:['用户号', '用户名', '用户姓名', '手机号', '修改时间', '修改人', '创建时间', '创建人'], //默认全选
    colSelect:['用户号', '用户名', '用户姓名', '手机号', '修改时间', '修改人', '创建时间', '创建人'],//动态绑定数据
    // nameFilter:[],//姓名过滤器选项
    list: null//后台动态加载的数据
 **  隐藏显示列的监听 **
   watch: {
    //监听列选中状态
    colOptions(valArr) {
      var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); 
      this.dropTableHead.filter(i => {
        console.log("dt  "+i.column_comment)
        if (arr.indexOf(i.column_comment) != -1) {
          i.istrue = false;
        } else {
          i.istrue = true;
        }
      });

    }
  }

methods中的列拖拽方法

      //列拖拽
columnDrop() {
  const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
  this.sortable = Sortable.create(wrapperTr, {
    animation: 180,
    handle : ".allowDrag",//声明可拖拽列class-name
    delay: 0,
    onEnd: evt => {
      const oldItem = this.dropTableHead[evt.oldIndex]
      this.dropTableHead.splice(evt.oldIndex, 1)
      this.dropTableHead.splice(evt.newIndex, 0, oldItem)
    }
  })
}

Answer 1

当设置一些字段隐藏后，再通过

document.querySelector('.el-table__header-wrapper tr')

在onEnd里面去取的evt里面对应的index是不对的，要过滤dropTableHead数组里面istrue为true的数据。这个过滤后的数据才是evt里面index能用的

Answer 2

遇到同样问题，能否告知下解决方法