Tree 树
一种呈现嵌套结构的组件。
何时使用
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树组件可以完整展现其中的层级关系，并具有展开/收起、选择等交互功能。
基本用法
Parent node 1
Leaf node 2
节点懒加载
Parent node 1
Leaf node 2 - dynamic loading
可勾选
Parent node 1
Leaf node 2
默认状态
Parent node 1
Parent node 1-1
Leaf node 1-2
Leaf node 2
禁用状态
Parent node 1
Parent node 1-1
Leaf node 1-2
Leaf node 2
自定义图标
Parent node 1
Leaf node 2
节点合并
Parent node 1
Parent node 2
Parent node 3
操作按钮
Parent node 1
Parent node 2
搜索过滤
parent node 1
parent node 2
parent node 3
parent node 4
parent node 5
虚拟滚动
可拖拽树
Default
parent node 1
parent node 2
leaf node 2-1
leaf node 2-1-1
leaf node 2-1-2
leaf node 2-2
parent node 3
leaf node 3-1
leaf node 3-2
parent node 4
leaf node 4-1
leaf node 4-2
parent node 5
leaf node 5-1
leaf node 5-2
Sortable
parent node 1
parent node 2
leaf node 2-1
leaf node 2-1-1
leaf node 2-1-2
leaf node 2-2
parent node 3
leaf node 3-1
leaf node 3-2
parent node 4
leaf node 4-1
leaf node 4-2
parent node 5
leaf node 5-1
leaf node 5-2
treeFactory 常用方法
Parent node 1
Node 2
Node 3
Tree 参数
| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
|---|---|---|---|---|
| data | ITreeNode[] | [] | 可选，树形结构数据 | 基本用法 |
| check | ICheck | false | 可选，是否启用勾选功能 | 可勾选 |
| dragdrop | IDragdrop | false | 可选，是否启用可拖拽功能 | 可拖拽树 |
Tree 事件
| 事件名 | 回调参数 | 说明 | 跳转 Demo |
|---|---|---|---|
| toggle-change | Function(node) | 节点展开/收起的回调事件，返回选中的节点对象 | 可勾选 |
| check-change | Function(node) | 节点勾选的回调事件，返回选中的节点对象 | 可勾选 |
| select-change | Function(node) | 节点选中的回调事件，返回选中的节点对象 | 可勾选 |
| node-click | Function(node) | 节点点击事件，返回点击的节点对象 | 可勾选 |
| lazy-node | Function(node, callback) | 节点懒加载事件，返回点击的节点对象及回调函数 | 节点懒加载 |
Tree 插槽
| 插槽名 | 说明 |
|---|---|
| default | 自定义节点 |
| content | 自定义节点内容 |
| icon | 自定义展开/收起按钮 |
| loading | 自定义节点懒加载时 loading 显示内容 |
TreeNode 参数
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| data | ITreeNode | [] | 可选，节点数据 |
| check | ICheck | false | 可选，是否启用勾选功能 |
| dragdrop | IDragdrop | false | 可选，是否启用可拖拽功能 |
| height | number | - | 可选，设置启用虚拟滚动 |
Tree 类型定义
ITreeNode
interface ITreeNode {
label: string;
id?: string;
children?: ITreeNode[];
selected?: boolean;
checked?: boolean;
expanded?: boolean;
disableSelect?: boolean;
disableCheck?: boolean;
disableToggle?: boolean;
}
ICheck
type ICheck = boolean | 'upward' | 'downward' | 'both' | 'none';
IDragdrop
type IDragdrop =
| boolean
| {
dropPrev?: boolean;
dropNext?: boolean;
dropInner?: boolean;
};
treeFactory
treeFactory是组件内部暴露出来的一些数据和方法，当自定义树结构的时候会用到。
type TreeFactory = {
// 扁平化处理后的数据，IInnerTreeNode 见下表
treeData: Ref<IInnerTreeNode[]>;
// 获取节点层级
getLevel: (node: IInnerTreeNode) => number;
// 获取某个节点的子节点
getChildren: (
node: IInnerTreeNode,
config?: {
expanded?: boolean; // 是否只从展开了的节点中获取数据
recursive?: boolean; // 是否需要获取非直接子节点
}
) => IInnerTreeNode[];
// 获取某个节点的父节点
getParent: (node: IInnerTreeNode) => IInnerTreeNode;
// 获取当前是展开状态的节点
getExpendedTree: () => ComputedRef<IInnerTreeNode[]>;
// 获取某个节点在扁平化数据结构中的索引
getIndex: (node: IInnerTreeNode) => number;
// 设置某个节点的属性值
setNodeValue: (node: IInnerTreeNode, key: keyof IInnerTreeNode, value: valueof<IInnerTreeNode>) => void;
// 展开节点，并触发`toggle-change`事件
expandNode: (node: IInnerTreeNode) => void;
// 收起节点，并触发`toggle-change`事件
collapseNode: (node: IInnerTreeNode) => void;
// 展开/收起节点
toggleNode: (node: IInnerTreeNode) => void;
// 展开所有节点
expandAllNodes: () => void;
// 单选，并触发`select-change`事件
selectNode: (node: IInnerTreeNode) => void;
// 取消单选，并触发`select-change`事件
deselectNode: (node: IInnerTreeNode) => void;
// 单选/取消单选，并触发`select-change`事件
toggleSelectNode: (node: IInnerTreeNode) => void;
// 获取已单选的节点
getSelectedNode: () => IInnerTreeNode;
// 勾选，并触发`check-change`事件
checkNode: (node: IInnerTreeNode) => void;
// 取消勾选，并触发`check-change`事件
uncheckNode: (node: IInnerTreeNode) => void;
// 勾选/取消勾选，并触发`check-change`事件
toggleCheckNode: (node: IInnerTreeNode) => void;
// 获取已勾选的节点
getCheckedNodes: () => IInnerTreeNode[];
// 禁用节点单选
disableSelectNode: (node: IInnerTreeNode) => void;
// 禁用节点勾选
disableCheckNode: (node: IInnerTreeNode) => void;
// 禁用节点展开/收起
disableToggleNode: (node: IInnerTreeNode) => void;
// 启用节点单选
enableSelectNode: (node: IInnerTreeNode) => void;
// 启用节点勾选
enableCheckNode: (node: IInnerTreeNode) => void;
// 启用节点展开/收起
enableToggleNode: (node: IInnerTreeNode) => void;
// 当节点只有一个子节点时，合并显示
mergeTreeNodes: () => void;
// 懒加载某个节点的子节点
lazyLoadNodes: (node: IInnerTreeNode) => void;
// 搜索节点，参数为搜索关键字和搜索配置项，SearchFilterOption 见下表
searchTree: (target: string, option: SearchFilterOption) => void;
};
IInnerTreeNode
interface IInnerTreeNode extends ITreeNode {
level: number;
idType?: 'random';
parentId?: string;
isLeaf?: boolean;
parentChildNodeCount?: number;
currentIndex?: number;
loading?: boolean; // 节点是否显示加载中
childNodeCount?: number; // 该节点的子节点的数量
isMatched?: boolean; // 搜索过滤时是否匹配该节点
childrenMatched?: boolean; // 搜索过滤时是否有子节点存在匹配
isHide?: boolean; // 过滤后是否不显示该节点
matchedText?: string; // 节点匹配的文字（需要高亮显示）
}
SearchFilterOption
interface SearchFilterOption {
isFilter: boolean; // 是否是过滤节点
matchKey?: string; // node节点中匹配搜索过滤的字段名
pattern?: RegExp; // 搜索过滤时匹配的正则表达式
}
