vue3 + element-plus 自定义树形穿梭框

在Vue 3和Element Plus中创建一个自定义树形穿梭框，可以使用ElTree组件和ElDialog组件。以下是一个简单的示例：

<template>
  <el-dialog title="树形穿梭" :visible="visible" @close="handleClose">
    <el-tree
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
    />
  </el-dialog>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTree, ElDialog } from 'element-plus';
 
const visible = ref(false);
const treeData = ref([
  {
    label: '一级 1',
    children: [
      {
        label: '二级 1-1',
      },
      {
        label: '二级 1-2',
      },
    ],
  },
  // ...更多树节点
]);
const defaultProps = {
  children: 'children',
  label: 'label',
};
 
const handleNodeClick = (data, node, component) => {
  console.log(data, node, component);
};
 
const handleClose = () => {
  visible.value = false;
};
 
// 打开对话框
const openDialog = () => {
  visible.value = true;
};
</script>

在这个示例中，我们定义了一个ElDialog组件，它包含了一个ElTree组件。通过点击按钮或其他触发事件，调用openDialog方法来显示对话框。在对话框中，用户可以浏览树形结构的数据，并且可以通过点击节点来处理节点的点击事件。

注意：这个示例假设你已经正确安装了Element Plus并且配置了Vue 3项目。