结合arco.design组件库的table实现双表格拖拽时，当拖拽最后一行时，数据更新视图没有更新

[liuna1998]

如图，拖拽2到第二个表格，渲染出错了，数据是对的 代码如下：

<template>
  <div>
    <h2>表格拖拽demo</h2>
    <a-collapse :default-active-key="[1, 2]">
      <a-collapse-item v-for="item in data" :key="item.id" :header="item.title">
        {{ item.tableData.map((item) => item.name) }}
        <VueDraggable
          v-model="item.tableData"
          target="tbody"
          group="arco-table"
          @end="onEnd"
        >
          <a-table :data="item.tableData" :pagination="false" row-key="name">
            <template #columns>
              <a-table-column :width="150" title="Name" data-index="name" />
              <a-table-column title="Salary" data-index="salary" />
            </template>
          </a-table>
        </VueDraggable>
      </a-collapse-item>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
  import { nextTick, ref } from 'vue'
  import { VueDraggable } from 'vue-draggable-plus'

  type TableData = {
    name: number
    salary: string
  }[]
  type Data = {
    id: number
    title: string
    tableData: TableData
  }[]
  // 数据
  const data = ref<Data>([
    {
      id: 1,
      title: '一、函数的定义',
      tableData: [
        { name: 1, salary: '一、函数的定义' },
        { name: 2, salary: '一、函数的定义' },
      ],
    },
    {
      id: 2,
      title: '二、函数的定义域和值域',
      tableData: [
        { name: 3, salary: '二、函数的定义域和值域' },
        { name: 4, salary: '二、函数的定义域和值域' },
      ],
    },
  ])
  function onEnd() {
    console.log('元素取消拖拽', data.value)
  }
</script>

[liuna1998]

用这个方法解决了

function onEnd() {
    console.log('元素顺序改变', data.value);
    const newData = [...data.value];
    data.value = [];
    nextTick(() => {
      data.value = newData;
      console.log('Arco 表格已重新渲染', data.value);
    })
}