vue使用iVew表格插件 + Sortable.js进行拖拽，拖拽后表格表头数据显示不对怎么解决？

Question

<template>
  <Table :columns="col" row-key="id" :data="tableData"></Table>
</template>
<script>
import Sortable from "sortablejs";
export default {
  props: {
    tableData: Array,
    col: Array
  },
  mounted() {
    this.columnDrop();
  },
  methods: {
    // 列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector(".ivu-table-header tr");
      Sortable.create(wrapperTr, {
        animation: 150,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.col[evt.oldIndex];
          this.col.splice(evt.oldIndex, 1);
          this.col.splice(evt.newIndex, 0, oldItem);
        }
      });
    }
  }
};
</script>

目前效果是可以进行拖拽，但是拖拽之后会出现显示错误，数据对应不上，但是打印出的数据是正确的，请问一下这种情况下如何解决？

Answer 1

看起来像是动态响应的问题，最后一句改成这样试试看？

this.col.splice(evt.newIndex, 0, JSON.parse(JSON.stringify(oldItem)))

Answer 2

this.col.splice(evt.newIndex, 0, this.col.splice(evt.oldIndex, 1)[0]);
var newArray1 = this.col.slice(0);
this.col = [];
this.$nextTick(function () {

this.col = newArray1;

});

这样设置表头与表里面的内容就行了，亲测有效

Answer 3

iview 表头 使用sortablejs 那个问题你是怎么解决的，看到了一定要回复啊，感谢