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

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 实现的树形结构展示组件，有拖拽、排序、自定义图标等功能

一、使用

1. 安装

npm install vue-project-tree -S

2. 导入

import VueProjectTree from "vue-project-tree";

3. 使用

import { ref } from 'vue';
import VueProjectTree from "vue-project-tree";

interface TreeNode {
    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 不允许拖拽、放下",
    },
]);

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

二、API

1、属性

名称	说明	类型	默认值
data	树形数据，最外层必须是数组	Array
idKey?	主键属性名（值在树中必须唯一）	string	"id"
labelKey?	标签属性名	string	"label"
childrenKey?	子节点数组属性名	string	"children"
indent?	左侧缩进值	number | string	24
nodeHeight?	节点高度	number | string	35
highlightCurrent?	是否高亮当前选中节点	boolean	true
expandIcon?	是否显示展开图标	boolean	true
expandIconSize?	展开图标大小	number | string	10
nodeIcon?	是否显示节点图标	boolean	false
nodeIconSize?	节点图标大小	number | string	20
filterMethod?	过滤方法（需手动调用 filter 函数执行过滤）	Function	() => true
draggable?	是否允许拖拽	boolean	false
sortable?	是否允许排序	boolean	false
allowDrag?	节点是否拖拽放下处理函数（返回 true 表示允许拖拽）	Function	() => false
allowDrop?	节点是否允许放下处理函数（返回 true 表示允许放下）	Function	() => false

2、事件

事件名	说明	回调参数
nodeClick	节点点击事件	(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据，节点数据，节点元素
nodeDblclick	节点双击事件	(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据，节点数据，节点元素
nodeRightClick	节点右键点击事件	(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据，节点数据，节点元素
currentNodeChange	当前节点改变事件	(data: any) 节点数据
start	拖拽开始事件	(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据，节点数据，节点元素
enter	拖拽进入事件	(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据，节点数据，节点元素
over	拖拽进入后在节点内持续触发	(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据，节点数据，节点元素
leave	拖拽离开事件	(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据，节点数据，节点元素
dropped	节点放下事件	(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据，节点数据，节点元素
droppedBefore	放在节点前事件	(dragData: any[], dropData: any, preventDefault: Function, _default: Function) 分别为拖拽节点数据列表，放下节点数据，回调函数（调用后阻止默认的移动操作），回调函数（调用后移动节点）
droppedIn	放在节点内事件	(dragData: any[], dropData: any, preventDefault: Function, _default: Function) 分别为拖拽节点数据列表，放下节点数据，回调函数（调用后阻止默认的移动操作），回调函数（调用后移动节点）
droppedAfter	放在节点后事件	(dragData: any[], dropData: any, preventDefault: Function, _default: Function) 分别为拖拽节点数据列表，放下节点数据，回调函数（调用后阻止默认的移动操作），回调函数（调用后移动节点）
end	拖拽结束事件	(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据，节点数据，节点元素

3、方法

方法	描述	参数	返回值
getMultipleList	获取选择节点的 data 数据
clearMultipleList	清除选择节点
getMoveList	获取多选列表，多选列表为空时返回元素为当前节点数据的列表
filter	执行过滤	接受一个参数并指定为 filter-method 的第一个参数
setCurrentData	设置当前选中节点的数据	(data: any) 节点数据
getCurrentData	获取当前选中节点的数据
findNodeById	通过节点主键值查找节点数据	(id: any, data?: any[]) 分别为节点主键值，（可选）查找的节点数据
findParentById	通过节点主键值查找父节点数据，没有则返回 null	(id: any, data?: any[]) 分别为节点主键值，（可选）查找的节点数据
safeFindParentById	通过节点主键值查找父节点数据，没有则返回 children 为根列表的节点数据	(id: any) 节点主键值
removeData	移除节点	(dataList: any[]) 节点数据列表
addData	添加节点	(dataList: any[], parentData: any, insertIndex = 0) 分别为节点数据列表，父节点数据，插入的下标（默认0）
moveBefore	移动到节点前	(dragData: any[], dropData: any) 分别为拖拽节点数据列表，放下节点数据	移动后的节点索引
moveIn	移动到节点内	(dragData: any[], dropData: any) 分别为拖拽节点数据列表，放下节点数据	移动后的节点索引
moveAfter	移动到节点后	(dragData: any[], dropData: any) 分别为拖拽节点数据列表，放下节点数据	移动后的节点索引

4、插槽

插槽名	说明	域
nodeIcon	自定义展开图标	{ data, size } 分别为节点数据，展开图标大小
nodeIcon	自定义节点图标	{ data, size } 分别为节点数据，节点图标大小