vue Ant desgin 穿梭框如何实现右侧上下拖动排序

在 Vue 中结合 Ant Design 的穿梭框组件（Transfer），要实现在右侧列表栏实现上下拖动排序的功能，你可以按照以下步骤操作：

1. 首先，在项目中引入 Ant Design 的 Transfer 组件和其他所需的 CSS 和 JavaScript 文件。

<template>
  <div>
    <a-transfer :data-source="sourceList" :target-list="targetList" :operations={['move']}" @transfer-change="handleTransferChange"></a-transfer>
  </div>
</template>

<script>
import { Transfer } from 'ant-design-vue';

export default {
  components: {
    Transfer,
  },
  data() {
    return {
      sourceList: [], // 左侧源列表
      targetList: [], // 右侧目标列表
    };
  },
  methods: {
    handleTransferChange({ source, target, move, type }) {
      if (type === 'move') {
        // 根据move方法判断元素是从左侧移动到右侧还是从右侧移动到左侧
        if (move.from === 'source' && move.to === 'target') {
          this.targetList.splice(move.index, 0, this.sourceList.shift()); // 移除左侧第一个元素并添加到右侧
        } else if (move.from === 'target' && move.to === 'source') {
          this.sourceList.push(this.targetList.splice(move.index, 1)[0]); // 移除右侧指定索引元素并添加到左侧
        }
      }
    },
  },
};
</script>

2. `handleTransferChange` 方法会在每次拖动事件发生时被触发。在这里，我们检查 `move.from` 和 `move.to` 来确定元素的移动方向，并相应地更新左右两侧的列表。

3. 注意保持数据同步，可以将 `sourceList` 和 `targetList` 存储在Vuex或者其他状态管理工具中，以便在整个应用中共享状态。