请教 vue draggable 数据切换 splice 导致视图刷新错误

Question

<template>
  <div class="wrapper">
    <frameElent @careteElent="elent" :ranking="rowspan"></frameElent>
    <div class="draggable">
      <h2>构建预览：</h2>
      <draggable :options="{animation: 150}" @update="datadragEnd">
        <div v-for="(item, index) in rowspan" :key="'group' + index" class="item">
          <div
            v-for="i in item"
            :key="i"
            :style="'width:' + Math.round(i / 750 * 10000) / 100.00 + '%'"
          >{{i}}</div>
        </div>
      </draggable>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import frameElent from "@/components/frame";
export default {
  components: { draggable, frameElent },
  data() {
    return {
      rowspan: [[200, 550], [400, 350], [600, 150]],
      ranking: {}
    };
  },
  methods: {
    datadragEnd(evt) {
      evt.preventDefault();

      this.rowspan.splice(
        evt.oldIndex,
        1,
        ...this.rowspan.splice(evt.newIndex, 1, this.rowspan[evt.oldIndex])
      );

      console.log("datadragEnd", this.rowspan);
      // console.log("拖动前的索引 :" + evt.oldIndex);
      // console.log("拖动后的索引 :" + evt.newIndex);
    },
    elent(e) {
      this.rowspan = e.rowspan;
    }
  }
};
</script>
<style lang="scss" scoped>
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.wrapper {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.draggable {
  width: 40%;
  .item {
    width: 100%;
    overflow: hidden;
    background-color: #42b983;
    color: #ffffff;
    div {
      float: left;
      box-sizing: border-box;
      min-height: 200px;
      height: auto;
      margin: 0;
      padding: 0 10px;
      border: 1px solid white;
    }
  }
}
.moudel {
  width: 30%;
}
</style>

代码效果为多行多列布局，通过拖动将点击行与目标行位置替换，但是目前有个问题：在拖动的时候，拖动预览时显示无误，但是当释放鼠标后数据可以更新正确，但是视图却无法刷新到正确

如图，右侧数据已经刷新，但是左侧板块切换失败，正确布局应该按照黄色箭头两个板块切换

经排查问题出在

      this.rowspan.splice(
        evt.oldIndex,
        1,
        ...this.rowspan.splice(evt.newIndex, 1, this.rowspan[evt.oldIndex])
      );

还望指点，如何修改，万分感谢！

Answer 1

实在不行可以试试这个 https://jsrun.net/6evKp/edit?v=1