Select

对 ElSelect增强

使用

基础用法

传入 data 数据，自动生成选项

禁用选项

将传入 data 数据中的某项设置为 disabled: true 即可

配置绑定数据键值

注意

如果使用了 config 配置注意正确配置 displayKey 属性

通过 config 配置数据键值。value- v-model 绑定的键值、desc-显示键值、disabled-控制不可选的键值、children-子分组的键值

使用插槽

通过默认插槽可以自定义备选项

开启多选

当 multiple 为 true 时，启用多选。此时绑定的 model-value 为数组格式

分组

通过 data 中的 children 字段配置可以轻松生成分组展示 (如果有多层分组，推荐使用 TreeSelect)

Props

Name	Description	Type	Options	Default
v-model	绑定值	array	number	string
data	绑定数据	Record<string, any>[]	-	-
config	配置绑定数据键值，如果是自定义config需要正确配置display-key	object	-	{ value: 'value', desc: 'desc', disabled: 'disabled', children: 'children' }
only-label	是否只显示 label	boolean	-	false
display-key	下拉选项需要显示的 key	array	-	['value','desc']
search-key	可搜索字段	array	-	['value','desc']
clearable	是否可以清空选项	boolean	-	true
placeholder	占位符	string	-	请选择
to-str	是否将值转为 string 类型	boolean	-	false
virtual	是否启用虚拟列表，下拉项超过 100 项的时候建议启用	boolean	-	false
remoteConfig	远程加载配置，请参考下面RemoteConfig	object	-	-
oneDataDefault	下拉选项只有一条数据的时候是否默认选中	boolean	-	false

支持 el-select 全部属性

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)
enter	当 input 按下回车键时触发，注意：使用 ↑↓ 选择 item 回车无效	select: select 下拉选择器的 ref 对象，element：select 内部 input 元素

Slots

Name	Description
-	自定插槽内容，参数为

Methods

Name	Description
setData	设置下拉选项数据
getData	获取下拉选项数据