Skip to content

TreeSelect 树形选择 ​

含有下拉菜单的树形选择器,结合了 el-tree 和 el-select 两个组件的功能。

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

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

基础用法 ​

树状选择器

选择任意级别 ​

当属性 check-strictly=true 时,任何节点都可以被选择,否则只有子节点可被选择。

提示

当使用 show-checkbox 时,由于 check-on-click-node 默认值是 false,这时只能通过复选框来选中。当然你也可以将其设为 true,这样点击整个节点都可以完成选择。

注意

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

多选 ​

通过点击或复选框选择多个选项。

禁用选项 ​

使用 disabled 字段禁用选项。

可筛选 ​

使用关键字筛选或自定义筛选方法。filterMethod 可以自定义数据筛选的方法,filterNodeMethod 可以自定义节点数据筛选的方法。

自定义内容 ​

自定义树节点的内容。

懒加载 ​

树节点懒加载,更加适合于数据量大的列表。

使用 node-key 属性 ​

默认情况下,modelValue 会查找 value 键。对于其他数据结构,必须提供 node-key 才能正常工作。

提示

node-key 在整棵树中应该是唯一的。value-key 与 node-key 具有相同的目标。与 Select 组件相反,TreeSelect 不能检索对象值。

API ​

属性 ​

方法 ​

方法名说明类型
treeRefTree 组件实例TreeInstance
selectRefSelect 组件实例SelectInstance
filter 已废弃过滤所有树节点,过滤后的节点将被隐藏接收一个参数并指定为 filter-node-method 属性的第一个参数
updateKeyChildren 已废弃为节点设置新数据,只有当设置 node-key 属性的时候才可用(key, data) 接收两个参数:1. 节点的 key 2. 新数据
getCheckedNodes 已废弃如果节点可以被选中(show-checkbox 为 true),本方法将返回当前选中节点的数组(leafOnly, includeHalfChecked) 接收两个布尔类型参数:1. 默认值为 false。若参数为 true,它将返回当前选中节点的子节点 2. 默认值为 false。如果参数为 true,返回值包含半选中节点数据
setCheckedNodes 已废弃设置目前选中的节点,使用此方法必须设置 node-key 属性要选中的节点构成的数组
getCheckedKeys 已废弃若节点可被选中(show-checkbox 为 true),它将返回当前选中节点 key 的数组(leafOnly) 接收一个布尔类型参数,默认为 false。若参数为 true,它将返回当前选中节点的子节点
setCheckedKeys 已废弃设置目前选中的节点,使用此方法必须设置 node-key 属性(keys, leafOnly) 接收两个参数:1. 一个需要被选中的多节点 key 的数组 2. 布尔类型的值,如果设置为 true,将只设置选中的叶子节点状态。默认值是 false
setChecked 已废弃设置节点是否被选中,使用此方法必须设置 node-key 属性(key/data, checked, deep) 接收三个参数:1. 要选中的节点的 key 或者数据 2. 一个布尔类型参数表明是否选中 3. 一个布尔类型参数表明是否递归选中子节点
getHalfCheckedNodes 已废弃如果节点可被选中(show-checkbox 为 true),它将返回当前半选中的节点组成的数组—
getHalfCheckedKeys 已废弃若节点可被选中(show-checkbox 为 true),则返回目前半选中的节点的 key 所组成的数组—
getCurrentKey 已废弃返回当前被选中节点的数据(如果没有则返回 null)—
getCurrentNode 已废弃返回当前被选中节点的数据(如果没有则返回 null)—
setCurrentKey 已废弃通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性(key, shouldAutoExpandParent=true) 1. 待被选节点的 key,如果为 null,取消当前选中的节点 2. 是否展开父节点
setCurrentNode 已废弃设置节点为选中状态,使用此方法必须设置 node-key 属性(node, shouldAutoExpandParent=true) 1. 待被选中的节点 2. 是否展开父节点
getNode 已废弃根据 data 或者 key 拿到 Tree 组件中的 node(data) 节点的 data 或 key
remove 已废弃删除 Tree 中的一个节点,使用此方法必须设置 node-key 属性(data) 要删除的节点的 data 或者 node 对象
append 已废弃为 Tree 中的一个节点追加一个子节点(data, parentNode) 1. 要追加的子节点的 data 2. 父节点的 data、key 或 node
insertBefore 已废弃在 Tree 中给定节点前插入一个节点(data, refNode) 1. 要增加的节点的 data 2. 参考节点的 data、key 或 node
insertAfter 已废弃在 Tree 中给定节点后插入一个节点(data, refNode) 1. 要增加的节点的 data 2. 参考节点的 data、key 或 node
focus 已废弃使选择器的输入框获取焦点函数
blur 已废弃使选择器的输入框失去焦点,并隐藏下拉框函数
selectedLabel 已废弃获取当前选中的标签对象