TreeSelect 树形选择

下拉菜单的树形选择器,结合了 el-treeel-select 组件的功能。

基础用法

用于树形结构的筛选器。

选择器
显示复选框
选择器

选择任意级别

当使用 check-strictly=true 属性时,可以选中任意节点,否则仅支持选中叶子节点。

提示

使用 show-checkbox 时,由于 check-on-click-node 默认值为 false,只能通过勾选选中,你可以将其设置为 true,然后通过点击节点进行选中。

选择器
显示复选框
选择器
配合 `check-on-click-node` 显示复选框
选择器

警告

当使用 show-checkbox 时,由于 `check-on-click-leaf` 默认为 true,可以通过点击最后的子节点来选中它们。

多选

通过点击或复选框进行多选。

选择器
显示复选框
选择器
配合 `check-strictly` 显示复选框
选择器

禁用选择

使用 disabled 字段禁用选项。

选择器

可筛选

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

选择器
过滤方法
选择器
过滤节点方法
选择器

自定义内容

自定义树节点内容。

选择器
使用 render content
选择器

懒加载

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

选择器
2.2.26 显示懒加载标签

使用 node-key 属性

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

提示

  1. node-key 在整个树中应该是唯一的。
  2. value-keynode-key 的目的相同。
  3. 与 select 组件相反,tree-select 不能获取对象值。

API

属性

由于该组件结合了 el-treeel-select 组件的功能,原始属性并未改变,因此这里不再赘述,请前往原始组件查看文档。

属性暴露事件插槽
selectselectselectselect

自有属性

名称描述类型默认值
cache-data 2.2.26懒加载节点的缓存数据,结构与 data 相同,用于获取未加载数据的标签array[]

暴露

警告

Tree 和 Select 组件下暴露的方法已废弃,并3.0.0 中移除,请在各自的组件层级下使用它们:treeselect

名称描述类型
treeRef 2.11.3Tree 组件实例TreeInstance
selectRef 2.11.3Select 组件实例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
}

来源

组件样式文档

贡献者