vue3 从上到下树状图插件

Vue3 中的树状图插件推荐可以尝试使用 Element Plus 的 Tree 组件或者是 Vuedraggable、VTreeview 等轻量级库。Element Plus 提供了丰富的 UI 和交互功能，适合有完整界面需求的情况。而 Vuedraggable 和 VTreeview 更侧重于数据驱动的拖拽操作和简单的树形结构展示，对于只需要基础树形结构并且需要更多自定义选项的场景较为合适。

以下是安装和使用的简单步骤：

1. 安装依赖：
- 对于 Element Plus：`npm install element-plus`
- 或者 Vuedraggable/VTreeview：先安装 Vue，然后分别通过命令 `npm install vuedraggable` 或 `npm install vtreeview` 安装。

2. 引入组件：
- Element Plus: 将 Element Plus 的 Tree 组件添加到项目中，并在需要的地方导入并使用 `<el-tree>` 标签。
- Vuedraggable/VTreeview: 导入所需模块并在 Vue 文件中注册组件或直接在模板中使用。

3. 使用示例：
- Element Plus 示例：

     <template>
       <el-tree :data="treeData" :props="{ children: 'children', label: 'name' }"></el-tree>
     </template>
     <script>
       import { ElTree } from "element-plus";
       export default {
         components: { ElTree },
         data() {
           return {
             treeData: [
               { name: '父节点1', children: [{ name: '子节点1-1' }, { name: '子节点1-2' }] },
               { name: '父节点2' }
             ]
           };
         }
       };
     </script>

- Vuedraggable 示例：

     <template>
       <v-treeview ref="treeview" :data="nodes" @node-dragged="handleDrag">
         <!-- ... -->
       </v-treeview>
     </template>
     <script>
       import VTreeView from 'vtreeview';
       export default {
         components: { VTreeView },
         data() {
           return {
             nodes: [...]
           };
         },
         methods: {
           handleDrag(node) {
             // 更新树形数据逻辑
           }
         }
       };
     </script>