vue-project-tree vue3 树形结构展示组件

这篇文章介绍了如何使用Vue3和TypeScript开发的vue-project-tree组件,包括安装、导入、使用示例以及详细的API文档,涉及属性、事件、方法和插槽的使用。组件支持拖拽、排序功能,以及自定义图标和节点操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

GitHub:vue-project-tree by one-ccs
Gitee:vue-project-tree by one-ccs
NPM:vue-project-tree - npm
遵循 MIT 开源协议

vue-project-tree

使用 Vue3 + TS 不依赖其它第三方库,实现的树形结构展示组件,有拖拽、排序、节点过滤、多选、自定义图标等功能。
覆写内置的 css变量可修改节点样式。
预览

一、使用

  1. 安装

npm install vue-project-tree -S

  1. 导入

import VueProjectTree from "vue-project-tree";

  1. 使用
<script setup lang="ts">
import { ref } from 'vue';
import VueProjectTree from "vue-project-tree";

interface TreeNode extends NodeData {
    id?: number;
    label?: string;
    children?: TreeNode[];
};

const data = ref<TreeNode[]>([
    {
        id: 1,
        label: "1",
        children: [
            {
                id: 2,
                label: "2",
                children: [
                    {
                        id: 3,
                        label: "3"
                    },
                    {
                        id: 4,
                        label: "4"
                    },
                ]
            },
            {
                id: 5,
                label: "5",
            },
        ],
    },
    {
        id: 6,
        label: "6",
    },
    {
        id: 7,
        label: "7",
    },
]);
</script>

<template>
    <vue-project-tree :data="data"></vue-project-tree>
</template>

二、API

1、属性

名称说明类型默认值
data树形数据,最外层必须是数组Array
idKey?主键属性名(值在树中必须唯一)string"id"
labelKey?标签属性名string"label"
childrenKey?子节点数组属性名string"children"
indent?左侧缩进值number | string24
nodeHeight?节点高度number | string35
highlightCurrent?是否高亮当前选中节点booleantrue
expandIcon?是否显示展开图标booleantrue
expandIconSize?展开图标大小number | string10
expandIconHold?没有子节点时是否保留位置booleanfalse
expandWithClick?是否在点击节点时展开booleantrue
expandHoverTime?拖拽时在节点上悬停多少毫秒展开该节点number380
checkbox?是否显示复选框booleanfalse
checkboxSize?复选框大小number | string20
nodeIcon?是否显示节点图标booleanfalse
nodeIconSize?节点图标大小number | string20
filterMethod?过滤方法(需手动调用 filter 函数执行过滤)Function(value: any, data: NodeData) => true
draggable?是否允许拖拽booleanfalse
allowDrag?节点是否拖拽放下处理函数(返回 true 表示允许拖拽)Function(data: NodeData) => false
allowDrop?节点是否允许放下处理函数(返回 true 表示允许放下)Function(data: NodeData) => false
dropOffset?放下位置偏移量number8

2、事件

事件名说明回调参数
nodeClick节点点击事件(event: DragEvent, data: NodeData, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
nodeDblclick节点双击事件(event: DragEvent, data: NodeData, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
nodeRightClick节点右键点击事件(event: DragEvent, data: NodeData, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
currentDataChange当前节点改变事件(data: NodeData
start拖拽开始事件(event: DragEvent, data: NodeData, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
enter拖拽进入事件(event: DragEvent, data: NodeData, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
over拖拽进入后在节点内持续触发(event: DragEvent, data: NodeData, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
leave拖拽离开事件(event: DragEvent, data: NodeData, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
dropped节点放下事件(event: DragEvent, data: NodeData, nodeElement: HTMLElement, extraData: DroppedExtraData) 分别为事件数据,节点数据,节点元素,额外数据(type: 拖拽放下位置, isPreventDefault: 是否阻止默认操作, preventDefault: 调用后阻止默认操作, _default?: 调用后立即执行默认操作(仅放下子事件拥有))
droppedBefore放在节点前事件(event: DragEvent, dragData: NodeData[], dropData: NodeData, extraData: DroppedExtraData) 分别为事件数据,拖拽节点数据列表,放下节点数据,额外数据(type: 拖拽放下位置, isPreventDefault: 是否阻止默认操作, preventDefault: 调用后阻止默认操作, _default?: 调用后立即执行默认操作(仅放下子事件拥有
droppedIn放在节点内事件(event: DragEvent, dragData: NodeData[], dropData: NodeData, extraData: DroppedExtraData) 分别为事件数据,拖拽节点数据列表,放下节点数据,额外数据(type: 拖拽放下位置, isPreventDefault: 是否阻止默认操作, preventDefault: 调用后阻止默认操作, _default?: 调用后立即执行默认操作(仅放下子事件拥有
droppedAfter放在节点后事件(event: DragEvent, dragData: NodeData[], dropData: NodeData, extraData: DroppedExtraData) 分别为事件数据,拖拽节点数据列表,放下节点数据,额外数据(type: 拖拽放下位置, isPreventDefault: 是否阻止默认操作, preventDefault: 调用后阻止默认操作, _default?: 调用后立即执行默认操作(仅放下子事件拥有
end拖拽结束事件(event: DragEvent, data: [NodeData, NodeData], nodeElement: [HTMLElement, HTMLElement]) 分别为事件数据,[开始节点数据,结束节点数据],[开始节点元素,结束节点元素]

3、方法

方法描述参数返回值
getMultipleList获取多选列表NodeData[]
setMultipleList设置多选列表(dataList: NodeData[]) 需要多选的节点列表
clearMultipleList清除多选列表
toggleChecked切换节点选中状态(data: NodeData) 节点数据
toggleExpanded切换节点展开状态(data: NodeData) 节点数据
expandAll展开所有节点
collapseAll收起所有节点
filter立即调用 filterMethod 对节点进行过滤(value: any) 作为 filterMethod 的第一个参数
findById通过节点主键值查找节点数据(id: string | number) 节点主键值NodeData | null
getLinealParents获取节点的所有直系父节点数据列表(data: NodeData) 节点数据NodeData[]
getParent获取节点的父节点数据,没有则返回 null(data: NodeData) 节点数据NodeData | null
getChildren获取节点的所有子节点数据列表(data: NodeData) 节点数据NodeData[]
hasChild递归判断父节点是否包含该子节点(parent: NodeData, data: NodeData) 分别为父节点数据,子节点数据boolean
removeData移除节点(dataList: NodeData[]) 节点数据列表
insertData插入节点(parentData: NodeData, dataList: NodeData[], insertIndex = 0) 分别为父节点数据,节点数据列表,插入的下标(默认0)
moveBefore移动到节点前(dragData: NodeData[], dropData: NodeData) 分别为拖拽节点数据列表,放下节点数据移动后的节点索引
moveIn移动到节点内(dragData: NodeData[], dropData: NodeData) 分别为拖拽节点数据列表,放下节点数据移动后的节点索引
moveAfter移动到节点后(dragData: NodeData[], dropData: NodeData) 分别为拖拽节点数据列表,放下节点数据移动后的节点索引

4、插槽

插槽名说明
expandIcon自定义展开图标{ data, size } 分别为节点数据,展开图标大小
checkbox自定义复选框{ data, size } 分别为节点数据,复选框大小
nodeIcon自定义节点图标{ data, size } 分别为节点数据,节点图标大小
label自定义节点标签{ data } 节点数据

5、CSS 变量

名称说明默认值
–color文本颜色#666666
–color-current当前选中节点文本颜色#4C74F6
–color-drop-in放入节点文本颜色#fff
–bg-color背景色transparent
–bg-color-current当前选中节点背景色#E0EFFF
–bg-color-checked选中节点背景色#E0EFFF
–bg-color-hover悬停节点背景色#0000000a
–bg-color-drop-in放入节点背景色#409eff

6、注意事项

  • 拖动节点时,若页面样式发生变动,会导致节点错位,进而导致拖拽事件不完整,致使节点样式错乱或数据丢失。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值