1.0.1 • Published 2 years ago
vvtree v1.0.1
VTree
采用虚拟滚动树实现的处理大数据量的Vue树组件。
简介
有些情况下，可能需要渲染数据量大的树形结构，而传统递归生成树结构的方法会导致 DOM 节点暴增，渲染、更新都会变慢。该组件借鉴网上虚拟滚动树的实现方法，实现了和 element-ui API 基本一致的能够应对较大数据量的树组件，建议在数据量不是很大、体验没有直线下滑的情况下，还是使用 element-ui 的树组件。
原理
- 虚拟滚动(就是为了减少 DOM 渲染，减少创建 DOM 开销)
- 平级 DOM 结构，通过 indent 区分树的层级关系
内部 node 结构
{
key,
// 原始数据
originNode,
parent,
children: [],
// 当前节点层级，用于计算 indent
level,
expanded,
visible,
checked: false,
// 半选状态
indeterminate: false,
filtered: false,
hasFilteredChildren: false,
selected: false,
loading: false,
loaded: false,
isDisabled: false,
isLeaf: false
}props
| prop 名字 | 数据类型 | 描述 | 是否必传 |
|---|---|---|---|
| data | Array | 和 element 一样，传入树数据 | 是 |
| height | Number | String | 用于指定组件根节点的高度，默认为 100% | 否 |
| nodeHeight | Number | 用于指定树每个节点的高度，默认为 26 | 否 |
| nodeKey | String | 用于指定标识树的每一个节点，参考 element 的 nodeKey | 否 |
| props | Object | 用于标识每个树节点的状态及如何找到节点的子节点，参考 element 的 props，默认值为 { label: 'label', children: 'children' }disabled 功能暂未实现 | 否 |
| load | Function(data, resolve) | 懒加载调用的方法，参考 element 的 load prop | 否 |
| lazy | Boolean | 指定是否是懒加载，默认为 false，只有为 true 的时候才是懒加载模式 | 否 |
| defaultExpandAll | Boolean | 是否默认展开全部节点，默认为 false | 否 |
| expandOnClickNode | Boolean | 是否在点击节点的时候展开节点，默认为 true | 否 |
| showCheckbox | Boolean | 是否显示勾选框，默认为 false | 否 |
| checkStrictly | Boolean | 是否严格遵守父子节点勾选不关联，默认为 false，参考 element 的checkStrictly | 否 |
| defaultCheckedKeys | Array | 默认选中的节点的 keys 数组，参考 element 的 defaultCheckedKeys | 否 |
| defaultExpandedKeys | Array | 默认展开的节点的 keys 数组，参考 element 的 defaultExpandedKeys，暂未实现 element 的 auto-expand-parent | 否 |
| accordion | Boolean | 暂未实现 | 否 |
| indent | Number | 层级的水平缩进，默认为 16，参考 | 否 |
| filterNodeMethod | Function(value, data, node) | 过滤节点时使用的算法，返回 true 则表示该节点可以显示，参考 element 的 filterNodeMethod | 否 |
| emptyText | String | 没有数据时显示的文本，默认为暂无数据 | 否 |
| expandedIcon | String | 节点展开时的左侧 icon class | 否 |
| collapsedIcon | String | 节点收起时的左侧 icon class | 否 |
| filterCheckStrictly | Boolean | 当过滤树的时候，勾选节点时是否勾选被过滤掉的节点，若为 true，则只会勾选被过滤出来的节点，隐藏的节点不会被勾选 | 否 |
方法
| 方法名 | 描述 | 参数 |
|---|---|---|
| setCheckedKeys | 通过 keys 设置当前选中的节点，需要设置 node-key | (keys, leafonly = false)，1. 要勾选的 keys 数组，2.是否只勾选叶子节点 |
| setCheckedNodes | 通过 nodes 设置当前选中的节点，需要设置 node-key | (nodes)，1. 要勾选的 nodes |
| getCheckedKeys | 获取当前被选中的节点的 keys，需要设置 node-key | (leafonly = false)，1. 是否只获取叶子节点 |
| getCheckedNodes | 获取当前选中的节点的 nodes，需要设置 node-key | (leafonly = false)，1. 是否只获取叶子节点 |
| setChecked | 根据 data 或者 key 设置节点的选中状态 | (keyOrData, checked, deep = false)，1. data、key，2. 选中状态，3. 是否更改子节点的选中状态 |
| getHalfCheckedNodes | 获取半选中状态的节点数据 | |
| getHalfCheckedKeys | 获取半选中状态的节点的 keys | |
| getCurrentKey | 获取当前被选中节点的 key，若没有则返回 null | |
| getCurrentNode | 获取当前被选中节点的数据，若没有则返回 null | |
| setCurrentKey | 通过 key 设置当前被选中的节点 | (key)，1. 要选中节点的 key |
| setCurrentNode | 通过数据设置当前被选中的节点 | (node)，1. 要选中节点的数据 |
| filter | 对树进行筛选操作 | 接受一个参数作为 filterNodeMethod 的第一个参数 |
事件
| 事件名 | 描述 | 参数 |
|---|---|---|
| current-change | 当前选中节点变化时触发 | 1. 被点击的节点的数据，2. 被点击的节点的 node |
| node-click | 节点被点击时触发 | 1. 被点击的节点的数据，2. 被点击的节点的 node |
| node-expand | 节点被展开时触发 | 1. 被点击的节点的数据，2. 被点击的节点的 node |
| node-collapse | 节点被收起时触发 | 1. 被点击的节点的数据，2. 被点击的节点的 node |
| check | 复选框被点击时触发 | 1. 节点的数据，2. { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys } |
| check-change | 节点选中状态改变时触发 | 1. 节点的数据，2. 节点选中状态，3. 时候有子节点被选中 |
由于使用虚拟滚动，导致无法监听每个数据的变化，所以 check-change 事件可能会触发多次
事件触发可能有偏差
插槽
content
该插槽用于自定义节点内容，插槽传入 data、node 两个属性
<v-tree>
<template v-slot="{ data, node }">
<span>{{ data.label }}</span>
</template>
</v-tree>empty
该插槽用于自定义没有数据时展示的内容
<v-tree>
<template v-slot:empty>
<span>没有数据，难受</span>
</template>
</v-tree>expanded-icon/collapsed-icon
该插槽用于自定义节点 展开/收起 时的 icon
<v-tree>
<template v-slot:expanded-icon>
<img src="xxxx" />
</template>
<template v-slot:collapsed-icon>
<img src="xxxx" />
</template>
</v-tree>