下拉选择组件。
# 基础用法
设置 clearable
属性可以一键清除所选值,设置 options
属性,options 数据可以是值类型数组,也可以是 Object 类型数组,绑定值以数组值的类型为准。
# 选中值支持 false 和 0
# 自定义展示值与绑定值
下拉列表中数据的展示值和绑定值可自定义,可以设置 optionLabel
属性指定展示值,optionValue
属性指定绑定值。
# 传默认值并且带筛选的情况
如果组件设置了 filter
,那么 value 值需要绑定为 Object 类型,否则在筛选时会影响下拉框显示的内容。
# 自定义选中值
通过设置具名 slot
为 selected
可自定义绑定展示值。
# 自定义下拉列表
通过设置具名 slot
为 option
可自定义下拉列表,通过 popupClass
属性可以给下拉 popup 设置自定义样式类。
# 组件禁用
设置 disabled
属性可使组件处于禁用状态。
# 选项值禁用
disabledOption
属性接收一个带有 boolean 返回值的函数,options 中每渲染一项将会触发此函数,以此来判断是否需要禁用。
# 过滤
设置 filter
属性接收一个函数,当在过滤区域输入过滤值会触发此函数执行,函数仅有一个参数为当前过滤的输入值,在过滤函数中处理过滤规则。
# 多选值
设置 multiple
属性可选择多个选项的值作为绑定值。
# loading状态
设置 loading
属性可实现数据异步加载效果提示。
# 无限滚动
在数据较多时可以设置 more
事件来进行滚动加载数据,事件接收一个 Promise 对象的异步函数。
# 表单校验
配合 EFormItem
组件可实现表单校验能力。
# 超长文本选项折行
如果通过样式(popupClass
)或自定义 option slot 来支持超长 option 的折行,则要注意最好设定下拉浮出框的宽度,防止因为折行产生的宽度计算导致宽度在逐步扩大或缩小。
# ESelect
# Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
placeholder | 占位文本 | String | false | - |
disabled | 禁用 | Boolean | false | - |
clearable | 是否清空 | Boolean | false | - |
filter | 下拉列表筛选 | Function | false | - |
loading | 是否显示 loading 状态。如果为 true,则不会显示 options | Boolean | false | - |
popupClass | 浮出框类 | String | false | - |
disabledOption | 判断某个选项是否不可选择,返回值 true 表示禁用该选项 | Function | false | - |
# Slots
Name | Description | Default Slot Content |
---|---|---|
selected | 已选中的值 | - |
option | - | - |
# MixIns
MixIn |
---|
EValidationMixin |
OptionsMixin |
# Events
Event Name | Description | Parameters |
---|---|---|
input | 获取选中的值 | value |