class TreeNode {
_id!: string;
type!: "node" | "leaf" | "root";
level!: number;
maxLevel?: number;
statistics!: Statistics | null;
// 标志位
selected: boolean = false;
expanded: boolean = false;
highlight: boolean = false;
indeterminate: boolean = false;
childRendered: boolean = false;
customData: any;
children: TreeNode[] = [];
}
TTree 组件内置了遍历函数,会对传进来的树进行遍历,然后重新生成新的树,所以需要保证传入的原始数据是一个树结构、或者树结构数组。树节点的数据结构如上所示。
对于每个节点的用户数据会存在 TreeNode
的 customData
里
<template>
<div>
<div class="tree-demo">
<rz-mass-tree
ref="tree"
:allowSelect="allowSelect"
:allowSearch="true"
:showStatistics="true"
:selectedId="selectedId"
:highlights="highlights"
:nodeHighlights="nodeHighlights"
:expandLevel="0"
:icon="{node: 'rz-icon-menu', leaf: 'rz-icon-view'}"
:draggable="true"
:onlyShowSelected="true"
@select-change="handleSelectChange"
@click="handleClick"
@node-drag-start="handleDrag"
></rz-mass-tree>
<rz-button size="small" @click.native="handleSetSelect"
>设置选中点</rz-button
>
<rz-button size="small" @click.native="setHightlight">高亮的点</rz-button>
<rz-button size="small" @click.native="clear">清空选中</rz-button>
<rz-button size="small" @click.native="getSelectedLeaf"
>获取选中的点</rz-button
>
<rz-button size="small" @click.native="toggleAllowSelect">切换模式</rz-button>
<rz-button size="small" @click.native="getNLeaf">获取前30个节点</rz-button>
</div>
</div>
</template>
<script>
import { fetchData } from "./__mock__/data.js";
export default {
data() {
return {
allowSelect: true,
fakeData: false,
selectedId: [],
highlights: [],
nodeHighlights: [],
isHighlight: true
};
},
methods: {
handleSetSelect() {
this.selectedId = ["1-1-1-1"];
this.$refs.tree.setSelect(this.selectedId, true);
},
handleSelectChange(event) {
console.log("select change", event);
},
setHightlight() {
this.highlights = this.isHighlight ? ["bDRZvQHmIU"] : [];
this.isHighlight = !this.isHighlight;
},
handleClick(event) {
console.log("click", event);
},
clear() {
this.$refs.tree.clear();
},
getSelectedLeaf() {
console.log("选中的点", this.$refs.tree.getSelectedLeaf());
},
handleDrag(event) {
console.log(event);
},
toggleAllowSelect() {
this.allowSelect = !this.allowSelect;
},
getNLeaf() {
console.log(this.$refs.tree.getNLeaf(30));
}
},
mounted() {
fetchData(this.fakeData).then(data => {
this.$refs.tree.loadData(data).then();
});
}
};
</script>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
data | 传入的原始数据, 必须得保证是树结构。 | Tree, Tree[] | - | - |
allowSelect | 是否显示勾选框,是否可勾选 | boolean | - | false |
selectAll | 是否勾选全部 | boolean | - | false |
showStatistics | 是否显示统计信息, 当 showCount = true 时会隐藏 | boolean | - | false |
showCount | 是否显示叶子节点数 | boolean | - | false |
showCountKey | 需要显示在括号内的内容的 key | string | - | - |
labelKey | 根据哪一个属性值来显示节点名称 | string | - | 'name' |
pageSize | 滚动加载子节点时,每次滚动加载的数量, 建议不要小于 20 | number | - | 20 |
icon | 叶子节点和非叶子节点的 icon 样式, 不传时则不显示图标 | { node: string, leaf: string} | - | - |
allowSearch | 是否开启搜索功能 | boolean | - | false |
hasOptions | 是否显示搜索选项 (false 则不显示下拉选项,默认 true) | boolean | - | true |
searchTypeLabel | 搜索框类型文字提示, 目前的搜索只支持两种类型,按非叶子节点搜索(node),按叶子节点搜索 (leaf) | {node: string; leaf: string} | - | {node: '部门' , leaf: '视频源'} |
searchTypePlaceholder | 搜索框类型 placeholder 文字提示, 目前的搜索只支持两种类型,按非叶子节点搜索(node),按叶子节点搜索 (leaf) | {node: string; leaf: string} | - | {node: '请输入部门名称' , leaf: '请输入视频源名称'} |
expandLevel | 默认展开的层级 | number | - | 0 |
highlights | 高亮的数据信息 | string[] | serial 数组 | - |
nodeHighlights | 高亮的非叶子节点数据信息 | string[] | groupSerial 数组 | - |
travelKey | 遍历函数所使用的 健 信息,根据 travelKey 去判断原始的树结构中,哪些属性表示子节点 | { resourceKey: string, subNodeKey: string} | - | {resourceKey: "resources", subNodeKey: "subTreeNodes"} |
filterMethod | 搜索函数,自定义搜索时的筛选函数,内置的搜索函数采用的是 String.includes 方法,target 为 TreeNode 里的 customData 对象,content 为搜索框输入的内容 | (target: any, content: string) => boolean | 例子: filterMethod = (target: any, content: string) => target.id === content, 用来判断节点的 id 是否和输入的内容相符 | (target: any, content: string) => target.name.includes(content) |
draggable | 节点是否可拖拽 | boolean | - | false |
onlyShowSelected | 在非勾选模式下,是否只显示选中的叶子节点 |
事件名 | 说明 | 参数 |
---|---|---|
click | 点击节点时触发 | 节点的原始数据 |
node-click | 点击节点时触发 | 节点的 TreeNode 数据 |
hover | hover 时触发 | 节点的原始数据 |
node-hover | hover 时触发 | 节点的 TreeNode 数据 |
select-change | 勾选改变时触发 | { select: tree, node: [] } select 属性表示是否选中, node 为数据数组 |
loaded | 数据加载完毕时触发 | - |
statistics-loaded | 获取统计信息完毕时触发 | 当前树的统计信息: {selected: number; all: number} |
node-drag | 拖拽时触发 | {node: TreeNode, event: DragEvent} |
node-drag-start | 拖拽开始时触发 | {node: TreeNode, event: DragEvent} |
node-drag-end | 拖拽结束时触发 | {node: TreeNode, event: DragEvent} |
方法名 | 说明 | 参数 |
---|---|---|
destroyTree | 手动销毁树组件 | - |
loadData | 加载数据 | data: Tree[] |
getTree | 获取整棵树的数据 | - |
setSelect | 设置选中节点 | { ids: string[], select: boolean} 其中为 ids 为叶子节点的唯一标识符数组, select: 是否选中 |
getSelectedLeaf | 获取所有选中的叶子节点数据,返回 TreeNode 的 customData | - |
getLeafByNode | 获取特定 node 的全部叶子节点 | node: TreeNode, 需要传 TreeNode 节点,建议使用 node-click 获取点击节点 |
getNLeaf | 获取前N个节点 | n: 数量 |
clear | 清空当前所有已选择的点 |