切换日光/暗黑模式
TreeSelect
当选项的层级多深时,使用树形选择器比普通选择器更适合
使用
基础用法
传入 data 数据,生成树形结构 (格式同 Select 分组)
禁用可选项
将传入 data 数据中的某项设置为 disabled: true
即可
配置绑定数据键值
通过 config 配置数据键值。value
- v-model 绑定的键值、desc
-显示键值、disabled
-控制不可选的键值、children
-子节点的键值
开启多选
当 multiple
为 true
时,启用多选。此时绑定的 model-value 为数组格式
多选控制不可选项目
同单选只需将传入 data 数据中的某项设置为 disabled: true
即可
多选父子节点互不关联
当 check-strictly
为 true
时,父子节点互不关联
只选取子节点
当 only-select-leaf
为 true
时,只会选取子节点的数据
自定义节点显示
通过 default
插槽可以定义内容。注意:在单选模式下需要参考下面内容自定义 class 实现控制不可选项目样式
选择节点过滤
当 filterable
为 true
时,启用选择节点过滤。在选择框中输入文本,将过滤节点内容
懒加载
与 ElTree
一样,配置 lazy
load
即可使用懒加载数据
Props
支持ElTreeSelect全部属性
Name | Description | Type | Options | Default |
---|---|---|---|---|
v-model | 绑定值 | string / array | - | - |
data | 绑定数据 | array | - | - |
props | 配置绑定数据键值 | object | - | {children: 'childrenList', label: 'desc', rootId: 'id', disabled: 'disabled', parentId: 'parentId', value: 'value'} |
remote-config | 远程加载数据配置。请参考下方RemoteConfig | object | - | - |
fetch-data | 自定义远程请求数据函数 | Function():Promise<Array<SelectTree>>> | - | - |
line | 是否显示树的连接线 | boolean | - | true |
SelectTree
tsx
interface SelectTree<T = ExternalParam> {
/**
* 父节点主键
*/
parentId: number
/**
* 主键
*/
id: number
/**
* 显示名称
*/
name: string
childrenList: Array<T>
}
RemoteConfig
Name | Description | Type | Options | Default |
---|---|---|---|---|
method | 请求方法 | string | GET/POST | GET |
params | 请求参数 | Record<string, any> | - | - |
cache | 是否缓存结果 | boolean | - | true |
cache-key | 本地缓存表名 | string | - | _dict_ |
storage-type | 缓存类型 | StorageType | sessionStorage/localStorage | localStorage |
expires | 缓存过期时间,单位:天 | number | - | 7 |
url | 请求路径 | string | - | - |
key | 缓存本地数据表中的key值。默认使用参数的值拼接 | string | - | - |
Events
Name | Description | Parameters |
---|---|---|
change | 选中值发生变化时触发 | 目前的选中值 |
visible-change | 下拉框出现/隐藏时触发 | 出现则为 true,隐藏则为 false |
remove-tag | 多选模式下移除 tag 时触发 | 移除的 tag 值 |
clear | 可清空的单选模式下用户点击清空按钮时触发 | - |
blur | 当 input 失去焦点时触发 | (event: Event) |
focus | 当 input 获得焦点时触发 | (event: Event) |
node-click | 节点被点击时的回调 | 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件 | 共四个参数,依次为:event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
check-change | 节点选中状态发生变化时的回调 | 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
check | 当复选框被点击的时候触发 | 共两个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 |
current-change | 当前选中节点变化时触发的事件 | 共两个参数,依次为:当前节点的数据,当前节点的 Node 对象 |
node-expand | 节点被展开时触发的事件 | 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
node-collapse | 节点被关闭时触发的事件 | 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
node-drag-start | 节点开始拖拽时触发的事件 | 共两个参数,依次为:被拖拽节点对应的 Node、event |
node-drag-enter | 拖拽进入其他节点时触发的事件 | 共三个参数,依次为:被拖拽节点对应的 Node、所进入节点对应的 Node、event |
node-drag-leave | 拖拽离开某个节点时触发的事件 | 共三个参数,依次为:被拖拽节点对应的 Node、所离开节点对应的 Node、event |
node-drag-over | 在拖拽节点时触发的事件(类似浏览器的 mouseover 事件) | 共三个参数,依次为:被拖拽节点对应的 Node、当前进入节点对应的 Node、event |
node-drag-end | 拖拽结束时(可能未成功)触发的事件 | 共四个参数,依次为:被拖拽节点对应的 Node、结束拖拽时最后进入的节点(可能为空)、被拖拽节点的放置位置(before、after、inner)、event |
node-drop | 拖拽成功完成时触发的事件 | 共四个参数,依次为:被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置(before、after、inner)、event |
Slots
Name | Description |
---|---|
- | 自定义树节点的内容,参数为 { node, data, multiple } |