用vue+antdv写一个双向树结构的穿梭框

好的，以下是代码示例：

首先，需要安装 `antdv` 和 `vue` 两个依赖包：

npm install ant-design-vue vue --save

然后，在组件中引入依赖：

import { Tree, Transfer } from 'ant-design-vue';
import { TreeNode } from 'ant-design-vue/types/tree';

export default {
  components: { Tree, Transfer },
  data() {
    return {
      // 左侧树结构数据
      leftTreeData: [],

      // 右侧树结构数据
      rightTreeData: [],

      // 穿梭框的数据源
      transferData: [],

      // 已选中的节点
      selectedKeys: [],

      // 已选中的节点的父节点key值
      parentKeys: [],

      // 是否展开所有节点
      autoExpandParent: true,
    };
  },
  methods: {
    // 初始化左侧树结构数据
    initLeftTreeData() {
      // TODO: 获取左侧树结构数据
    },

    // 初始化右侧树结构数据
    initRightTreeData() {
      // TODO: 获取右侧树结构数据
    },

    // 将左侧树结构数据转换为穿梭框的数据源
    convertDataToTransferData(data: TreeNode[], parentKey: string) {
      data.forEach((item: TreeNode) => {
        const key = parentKey ? `${parentKey}-${item.key}` : item.key;
        this.transferData.push({
          key,
          title: item.title,
          disabled: item.isLeaf,
        });

        if (item.children && item.children.length > 0) {
          this.convertDataToTransferData(item.children, key);
        }
      });
    },

    // 穿梭框选中项变化时的回调函数
    handleTransferChange(targetKeys: string[], direction: string, moveKeys: string[]) {
      if (direction === 'right') {
        // 将选中项添加到右侧树结构数据中
        const selectedNodes = moveKeys.map((key) => {
          const node = this.findNodeByKey(this.leftTreeData, key);
          return {
            key: node.key,
            title: node.title,
            children: node.children,
          };
        });

        this.rightTreeData = this.rightTreeData.concat(selectedNodes);
      } else if (direction === 'left') {
        // 将选中项从右侧树结构数据中移除
        this.rightTreeData = this.rightTreeData.filter((node) => {
          return !moveKeys.includes(node.key);
        });
      }
    },

    // 查找树结构中指定key的节点
    findNodeByKey(data: TreeNode[], key: string): TreeNode {
      let node: TreeNode | undefined;
      data.forEach((item: TreeNode) => {
        if (item.key === key) {
          node = item;
          return;
        } else if (item.children && item.children.length > 0) {
          const result = this.findNodeByKey(item.children, key);
          if (result) {
            node = result;
            return;
          }
        }
      });

      return node;
    },

    // 左侧树结构节点选中状态变化时的回调函数
    handleLeftTreeSelect(selectedKeys: string[], e: MouseEvent & { selected: boolean; key: string }) {
      this.selectedKeys = selectedKeys;
      this.parentKeys = [];
      selectedKeys.forEach((key) => {
        const node = this.findNodeByKey(this.leftTreeData, key);
        if (node) {
          this.parentKeys.push(node.key.split('-')[0]);
        }
      });
    },

    // 左侧树结构节点展开/折叠状态变化时的回调函数
    handleLeftTreeExpand(expandedKeys: string[]) {
      this.autoExpandParent = false;
    },
  },
  created() {
    this.initLeftTreeData();
    this.initRightTreeData();
  },
  mounted() {
    this.convertDataToTransferData(this.leftTreeData, '');
  },
  render() {
    return (
      <div>
        <div>
          <div>左侧树结构：</div>
          <Tree
            treeData={this.leftTreeData}
            selectedKeys={this.selectedKeys}
            parentKeys={this.parentKeys}
            autoExpandParent={this.autoExpandParent}
            onSelect={this.handleLeftTreeSelect}
            onExpand={this.handleLeftTreeExpand}
          />
        </div>
        <div>
          <div>穿梭框：</div>
          <Transfer
            dataSource={this.transferData}
            targetKeys={this.rightTreeData.map((node) => node.key)}
            onChange={this.handleTransferChange}
            render={(item) => item.title}
          />
        </div>
        <div>
          <div>右侧树结构：</div>
          <Tree treeData={this.rightTreeData} />
        </div>
      </div>
    );
  },
};

以上代码仅供参考，具体实现方式还需根据具体业务场景进行调整。