VTree

采用虚拟滚动树实现的处理大数据量的Vue树组件。

简介

有些情况下，可能需要渲染数据量大的树形结构，而传统递归生成树结构的方法会导致 DOM 节点暴增，渲染、更新都会变慢。该组件借鉴网上虚拟滚动树的实现方法，实现了和 element-ui API 基本一致的能够应对较大数据量的树组件，建议在数据量不是很大、体验没有直线下滑的情况下，还是使用 element-ui 的树组件。

原理

1. 虚拟滚动(就是为了减少 DOM 渲染，减少创建 DOM 开销)
2. 平级 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>