antdesign-vue实现两个table相互拖拽排序

实现两个table相互拖拽排序可以使用ant-design-vue的`<a-transfer>`组件。具体实现步骤如下：

1. 使用`<a-transfer>`组件分别渲染两个table，设置`:data-source`和`:target-keys`属性。

<a-transfer
  :data-source="leftTableData"
  :target-keys="leftSelectedKeys"
  :render="item => item.title"
  :operations="['>', '<']"
  :list-style="{'width': '200px'}"
></a-transfer>

<a-transfer
  :data-source="rightTableData"
  :target-keys="rightSelectedKeys"
  :render="item => item.title"
  :operations="['>', '<']"
  :list-style="{'width': '200px'}"
></a-transfer>

2. 监听`change`事件，实现数据的拖拽操作。

<a-transfer
  :data-source="leftTableData"
  :target-keys="leftSelectedKeys"
  :render="item => item.title"
  :operations="['>', '<']"
  :list-style="{'width': '200px'}"
  @change="handleTransferChange"
></a-transfer>

<a-transfer
  :data-source="rightTableData"
  :target-keys="rightSelectedKeys"
  :render="item => item.title"
  :operations="['>', '<']"
  :list-style="{'width': '200px'}"
  @change="handleTransferChange"
></a-transfer>

methods: {
  handleTransferChange (nextTargetKeys, direction, moveKeys) {
    const { leftTableData, rightTableData } = this
    if (direction === 'right') {
      const moveData = leftTableData.filter(item => moveKeys.includes(item.key))
      this.rightTableData = rightTableData.concat(moveData)
      this.leftTableData = leftTableData.filter(item => !moveKeys.includes(item.key))
    } else if (direction === 'left') {
      const moveData = rightTableData.filter(item => moveKeys.includes(item.key))
      this.leftTableData = leftTableData.concat(moveData)
      this.rightTableData = rightTableData.filter(item => !moveKeys.includes(item.key))
    }
  }
}

3. 根据需要自定义样式和数据源。

完整代码示例：

<template>
  <div>
    <a-transfer
      :data-source="leftTableData"
      :target-keys="leftSelectedKeys"
      :render="item => item.title"
      :operations="['>', '<']"
      :list-style="{'width': '200px'}"
      @change="handleTransferChange"
    ></a-transfer>

    <a-transfer
      :data-source="rightTableData"
      :target-keys="rightSelectedKeys"
      :render="item => item.title"
      :operations="['>', '<']"
      :list-style="{'width': '200px'}"
      @change="handleTransferChange"
    ></a-transfer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      leftTableData: [
        { key: '1', title: '项目1' },
        { key: '2', title: '项目2' },
        { key: '3', title: '项目3' },
        { key: '4', title: '项目4' }
      ],
      rightTableData: [
        { key: '5', title: '项目5' },
        { key: '6', title: '项目6' },
        { key: '7', title: '项目7' },
        { key: '8', title: '项目8' }
      ],
      leftSelectedKeys: [],
      rightSelectedKeys: []
    }
  },
  methods: {
    handleTransferChange (nextTargetKeys, direction, moveKeys) {
      const { leftTableData, rightTableData } = this
      if (direction === 'right') {
        const moveData = leftTableData.filter(item => moveKeys.includes(item.key))
        this.rightTableData = rightTableData.concat(moveData)
        this.leftTableData = leftTableData.filter(item => !moveKeys.includes(item.key))
      } else if (direction === 'left') {
        const moveData = rightTableData.filter(item => moveKeys.includes(item.key))
        this.leftTableData = leftTableData.concat(moveData)
        this.rightTableData = rightTableData.filter(item => !moveKeys.includes(item.key))
      }
    }
  }
}
</script>