vue3 + vue-draggable-plus + element-plus 表格行拖拽，拖拽第3条与第2条数据切换顺序，报错找不到属性id，问题出在这里:key="item.id"

[zhengjiaao]

vue3 + vue-draggable-plus + element-plus 表格行拖拽，拖拽第3条与第2条数据切换顺序，报错找不到属性id，问题出在这里:key="item.id"

例如：拖拽第3条数据与第2条数据切换顺序，报错找不到属性id，问题出在这里 :key="item.id" 报错

    <!-- 表格行拖拽 todo 存在bug-->
    <el-card class="box">
      <template #header>
        <div class="card-header">
          <span>表格行拖拽</span>
        </div>
      </template>

      <VueDraggable
        v-model="tableData"
        @start="onStartTableData"
        @end="onEndTableData"
      >
        <el-row class="table-header">
          <el-col :span="8">名称</el-col>
          <el-col :span="8">年龄</el-col>
          <el-col :span="8">地址</el-col>
        </el-row>
        <transition-group>
          <el-row v-for="item in tableData" :key="item.id" class="table-row">
            <el-col :span="8">
              <el-icon class="drag-handler"><Menu /></el-icon>
              {{ item.name }}
            </el-col>
            <el-col :span="8">{{ item.age }}</el-col>
            <el-col :span="8">{{ item.address }}</el-col>
          </el-row>
        </transition-group>
      </VueDraggable>
    </el-card>


import {nextTick, ref} from 'vue'
import {VueDraggable} from 'vue-draggable-plus'


// 表格数据
const tableData = ref([
  {id: 1, name: 'John', age: 20, address: 'New York'},
  {id: 2, name: 'Jane', age: 24, address: 'London'},
  {id: 3, name: 'Tom', age: 30, address: 'Sydney'}
])

const onStartTableData = (event: any) => {
  console.log('Drag started', event);
  console.log('Drag started tableData', tableData.value);
}

const onEndTableData = (event: any) => {
  console.log('Drag onEnd', event);
  console.log('Drag onEnd tableData', tableData.value);
  console.log('Drag onEnd tableData (JSON)', JSON.stringify(tableData.value, null, 2));
  console.log('Drag onEnd event.newIndex', event.newIndex);
  console.log('Drag onEnd event.oldIndex', event.oldIndex);
}

[zhengjiaao]

前2条数据拖拽切换顺序没问题，与第3条切换顺序也没问题，但是拖拽第3条数据时，出现问题，找不到需要切换的数据。