Virtualized Tree 虚拟化树形控件

不论你的数据量多大，虚拟树都能毫无压力地处理。

import { createApp } from 'vue'
import { ElTreeV2 } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElTreeV2)

基础用法

基础的树形结构展示。

可选择的虚拟树

适用于需要选择层级时使用。

注意

在使用 show-checkbox 时，因为 check-on-click-leaf 默认值为 true，最后一个树节点可以通过点击节点进行勾选。

自定义节点内容

节点的内容支持自定义，可以在节点区添加按钮或图标等内容。

树节点过滤

树节点是可以被过滤的。在需要对节点进行过滤时，调用 Tree 实例的 filter 方法，参数为关键字。需要注意的是，此时需要设置 filter-method，值为过滤函数。

API

Attributes

属性名	说明	类型	默认值
data	数据源	array	—
props	配置项，用于指定 label / children 等字段	object	—
height	树的高度	number	—
item-size	每个节点的高度	number	26
show-checkbox	是否显示多选框	boolean	false
default-expanded-keys	默认展开的节点 key 数组	array	—
default-checked-keys	默认勾选的节点 key 数组	array	—
filter-method	过滤方法	Function	—
highlight-current	是否高亮当前选中节点	boolean	false

Events

事件名	说明	回调参数
node-click	节点被点击时触发	(data, node, event)
check-change	节点勾选状态发生变化时触发	(data, checked)
current-change	当前选中节点变化时触发	(data, node)

更多细节参见 Element Plus Virtualized Tree 文档。