vue3+element plus树穿梭框

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

首先，确保你已经安装了Vue 3和Element Plus。

npm install vue@next
npm install element-plus

然后，你可以在你的Vue组件中这样使用ElTree：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTree } from 'element-plus';
 
const treeData = ref([
  {
    label: '一级目录 1',
    children: [
      {
        label: '二级目录 1-1',
      },
      {
        label: '二级目录 1-2',
      },
    ],
  },
  {
    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>

在这个例子中，我们定义了一个树形结构的treeData，并通过ElTree组件展示出来。defaultProps定义了子节点的属性名和标签显示的属性。handleNodeClick是一个事件处理函数，当用户点击树中的节点时会被调用。