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

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 }