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 | 懒加载节点的缓存数据,结构与 data 相同,用于获取未加载数据的标签 | array | [] |
暴露
警告
Tree 和 Select 组件下暴露的方法已废弃,并将在 3.0.0 中移除,请在各自的组件层级下使用它们:tree 和 select。
| 名称 | 描述 | 类型 |
|---|---|---|
| treeRef 2.11.3 | Tree 组件实例 | TreeInstance |
| selectRef 2.11.3 | 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`),则返回当前选中的节点键数组 | (leafOnly) 接受一个布尔类型参数,默认值为 false。如果参数为 true,它仅返回当前选中的子节点 key 数组。 |
| setCheckedKeys 已废弃 | 设置某些节点为选中状态,仅在指定了 node-key 时有效 | (keys, leafOnly) 接受两个参数:1. 要选中的节点 key 数组 2. 布尔类型参数。如果设置为 true,则仅设置叶子节点的选中状态。默认值为 false。 |
| setChecked 已废弃 | 设置节点是否选中,仅在指定了 node-key 时有效 | (key/data, checked, deep) 接受三个参数:1. 要选中的节点 key 或数据 2. 表示是否选中的布尔值。3. 表示是否递归选中/取消选中子节点的布尔值 (自 2.14.0 起,无论 check-strictly 如何设置,此参数均有效)。 |
| 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
}