在vuetify中将行从一个动态表移动到另一个动态表

<template>
  <div>
    <v-data-table
      :headers="sourceHeaders"
      :items="sourceItems"
      item-key="id"
    >
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
        <td>{{ props.item.age }}</td>
        <td>
          <v-btn @click="moveRow(props.item)">移动</v-btn>
        </td>
      </template>
    </v-data-table>

    <v-data-table
      :headers="targetHeaders"
      :items="targetItems"
      item-key="id"
    >
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
        <td>{{ props.item.age }}</td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sourceHeaders: [
        { text: '姓名', value: 'name' },
        { text: '年龄', value: 'age' },
        { text: '操作', value: 'actions' },
      ],
      sourceItems: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 },
      ],
      targetHeaders: [
        { text: '姓名', value: 'name' },
        { text: '年龄', value: 'age' },
      ],
      targetItems: [],
    };
  },
  methods: {
    moveRow(row) {
      const index = this.sourceItems.findIndex(item => item.id === row.id);
      if (index !== -1) {
        const movedRow = this.sourceItems.splice(index, 1)[0];
        this.targetItems.push(movedRow);
      }
    },
  },
};
</script>