TreeSelect 树形选择
下拉菜单的树形选择器,结合了 el-tree 和 el-select 组件的功能。
基础用法
用于树形结构的选择器。
选择任意级别
使用 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 组件相反,tree-select 无法检索对象值。
API
属性
由于该组件结合了 el-tree 和 el-select 组件的功能,原有属性没有改变,这里不再赘述,请到原组件查看文档。
自有属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| cache-data 2.2.26 | 懒加载节点的缓存数据,结构与数据相同,用于获取未加载数据的标签 | object | [] |
暴露
警告
暴露在 tree 和 select 组件下的方法已被弃用,并将在 3.0.0 中移除,请在它们的组件层下使用:tree 和 select。
| 名称 | 描述 | 类型 |
|---|---|---|
| treeRef 2.11.3 | 树形组件实例 | TreeInstance |
| selectRef 2.11.3 | 选择组件实例 | 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`),则返回当前选中的节点键数组 | (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`),则返回当前半选中的节点键数组 | — |
| getCurrentKey 已弃用 | 返回高亮节点的 key(如果没有节点高亮则为 null) | — |
| getCurrentNode 已弃用 | 返回高亮节点的数据(如果没有节点高亮则为 null) | — |
| setCurrentKey 已弃用 | 通过 key 设置高亮节点,仅在分配了 node-key 时有效 | (key, shouldAutoExpandParent=true) 1. 要高亮的节点的 key。如果为 null,则取消当前高亮的节点 2. 是否自动展开父节点 |
| setCurrentNode 已弃用 | 设置高亮节点,仅在分配了 node-key 时有效 | (node, shouldAutoExpandParent=true) 1. 要高亮的节点 2. 是否自动展开父节点 |
| getNode 已弃用 | 通过数据或 key 获取节点 | (data) 节点的数据或 key |
| remove 已弃用 | 移除一个节点,仅在分配了 node-key 时有效 | (data) 要删除的节点的数据或节点 |
| append 已弃用 | 在树中向给定节点追加一个子节点 | (data, parentNode) 1. 要追加的子节点的数据 2. 父节点的数据、key 或节点 |
| insertBefore 已弃用 | 在树中给定节点之前插入一个节点 | (data, refNode) 1. 要插入的节点的数据 2. 参考节点的数据、key 或节点 |
| insertAfter 已弃用 | 在树中给定节点之后插入一个节点 | (data, refNode) 1. 要插入的节点的数据 2. 参考节点的数据、key 或节点 |
| focus 已弃用 | 使输入框获取焦点 | Function |
| blur 已弃用 | 使输入框失去焦点,并隐藏下拉框 | Function |
| selectedLabel 2.8.5 已弃用 | 获取当前选中的标签 | object |
类型声明
显示声明
ts
type CacheOption = {
value: string | number | boolean | object
currentLabel: string | number
isDisabled: boolean
}