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
属性
方法
| 方法名 | 说明 | 类型 |
|---|---|---|
| treeRef | Tree 组件实例 | TreeInstance |
| selectRef | Select 组件实例 | 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 已废弃 | 获取当前选中的标签 | 对象 |
