vue3+elementPlus实现树形穿梭框

在Vue 3和Element Plus中实现树形穿梭框，可以使用ElTree组件，并结合ElDialog组件来实现。以下是一个简单的示例代码：

<template>
  <el-dialog title="树形穿梭框" :visible="dialogVisible" @close="dialogVisible = false">
    <el-tree
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
    />
  </el-dialog>
</template>
 
<script setup>
import { ref } from 'vue';
 
const dialogVisible = ref(false);
const treeData = ref([
  {
    label: '一级目录1',
    children: [
      {
        label: '二级目录1-1'
      },
      {
        label: '二级目录1-2',
        children: [
          {
            label: '三级目录1-2-1'
          }
        ]
      }
    ]
  },
  {
    label: '一级目录2',
    children: [
      {
        label: '二级目录2-1'
      },
      {
        label: '二级目录2-2'
      }
    ]
  }
]);
const defaultProps = {
  children: 'children',
  label: 'label'
};
 
const handleNodeClick = (data, node, tree) => {
  console.log(data, node, tree);
};
</script>

在这个示例中，我们定义了一个dialogVisible来控制对话框的显示，并通过ElTree组件展示树形结构的数据。treeData是树形结构的数据，defaultProps定义了子节点的属性键和标签的显示。handleNodeClick是节点点击时的事件处理函数，可以在这里编写点击节点后的逻辑。