使用a-table实现两个表数据的左移右移

在Ant Design Vue库中的`a-table`组件中，如果你想要实现在表格中展示两个表的数据，并允许用户进行左移和右移的操作，你可以这样做：

首先，你需要准备两个数组分别存储你要显示的数据，假设它们是`data1`和`data2`。然后，可以在`a-table`组件内，通过`v-for`遍历这两个数组，每个循环里创建一个新的行元素。

<template>
  <div>
    <a-table :columns="columns" :data="data1">
      <!-- 每一行可以这样表示 -->
      <template slot-scope="scope">
        <tr>
          <!-- 表格列内容... -->
          <!-- 可能需要添加一个操作列，比如编辑、删除等 -->
          <td>
            <button @click="moveRow(scope.$index, data1, 'left')">左移</button>
            <button @click="moveRow(scope.$index, data1, 'right')">右移</button>
          </td>
        </tr>
      </template>
    </a-table>

    <a-table :columns="columns" :data="data2">
      <!-- 类似的结构，但是数据源是data2 -->
      <!-- ... -->
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: ..., // 定义你的列配置
      data1: ...,  // 数据源1
      data2: ...   // 数据源2
    };
  },
  methods: {
    moveRow(index, dataSource, direction) {
      if (direction === 'left') {
        if (index > 0) {
          const [firstItem, rest] = [...dataSource];
          dataSource[index - 1] = firstItem;
          dataSource[index] = rest;
        }
      } else if (direction === 'right') {
        if (index < dataSource.length - 1) {
          const [lastItem, rest] = [...dataSource.slice(0, index + 1)];
          dataSource[index + 1] = lastItem;
          dataSource[index] = rest;
        }
      }
      // 更新数据源的状态
      this[dataSource].splice(index, 1);
    }
  }
};
</script>

这里只是一个基本的示例，实际操作中可能还需要处理一些边界情况，如索引越界、并发修改等问题。同时，为了保持数据的一致性，可能需要在后台同步这两份数据的变化。