Vue3 多功能树形组件

开发环境：Vue3、Typescript

快速开始

1 安装

npm install vue3-rich-tree

2 配置

2.1 导入插件

在 main.ts 中导入插件：

import {Vue3RichTreePlugin} from 'vue3-rich-tree' 
import '/node_modules/vue3-rich-tree/dist/vue3-rich-tree.css' 

app.use(Vue3RichTreePlugin);

2.2 配置全局类型

在src\types 新增global.d.ts 文件，内容如下：

 // src/types/global.d.ts<br/>
import type { 
TreeNodeData
} from 'vue3-rich-tree' 
 // 将类型声明为全局可用 
declare global { 
  // 直接声明全局类型别名 
  type VET_TreeNodeData = TreeNodeData
} 

3 使用

    <Tree :data="treeData"
    :draggable="true"
    :allow-edit="true"
    :show-edit-flag="true"
    @node-drop="handleNodeDrop" 
    @node-edit="handleNodeEdit"
    @node-click="handleNodeClick" />

3.1 属性解释

3.2 示例数据

3.2.1 数据结构

const treeData = ref<TreeNodeData>({
  id: 1,
  label: '工艺拆分',
  children: [
    {
      id: 2,
      label: '一级节点 1',
      parentId: 1,
      children: [
        { id: 5, label: '二级节点 1-1',parentId:2 },
        { id: 6, label: '二级节点 1-2',parentId:2 },
        {
          id: 7, label: '二级节点 1-3',
          parentId:2,
          children: [
            { id: 8, label: '三级节点 1-3-1',parentId:7 },
            { id: 9, label: '三级节点 1-3-2',parentId:7 },
            { id: 10, label: '三级节点 1-3-3',parentId:7 },
            { id: 11, label: '三级节点 1-3-4',parentId:7 }
          ]
        }
      ]
    },
    {
      id: 12,
      label: '一级节点 2',
      parentId:1,
      children: [
        { id: 13, label: '二级节点 2-1',parentId:12 },
        { id: 14, label: '二级节点 2-2',parentId:12 }
      ]
    },
    {
      id: 15,
      label: '一级节点 3',
      parentId:1,
      children: [
        { id: 16, label: '二级节点 3-1',parentId:15 },
        {
          id: 17,
          label: '二级节点 3-2',
          parentId:15,
          children: [
            { id: 18, label: '三级节点 3-2-1',parentId:17 },
            { id: 19, label: '三级节点 3-2-2',parentId:17 }
          ]
        }
      ]
    }
  ]
});

3.2.2 事件

function handleNodeDrop(event: { draggedNode: TreeNodeData, targetNode: TreeNodeData }) {
  // 在这里实现你的节点移动逻辑
  // 例如：将 draggedNode 从原位置移除，添加到 targetNode 的子节点中
  event.draggedNode.parentId = event.targetNode.id;
  console.log("在这里实现你的节点移动逻辑::",event);
}

function handleNodeEdit(event: { node: TreeNodeData, newLabel: string }) {
  // 更新节点标签
  event.node.label = event.newLabel;
  // 或者如果需要不可变数据：
  // return { ...node, label: newLabel }
  console.log("更新节点标签::",event);
}

function handleNodeClick(event: { node: TreeNodeData }) {
  // 在这里实现你的节点点击逻辑
  console.log("在这里实现你的节点点击逻辑::",event);
}