Select 下拉选择框
规则
js
{
type: "select",
field: "cate_id",
title: "产品分类",
value: ["104","105"],
options: [
{"value": "104", "label": "生态蔬菜", "disabled": false},
{"value": "105", "label": "新鲜水果", "disabled": false},
],
props: {
multiple: true
},
}
完整配置项:Element_Select
value :Number | String | Array
Options
字段名 | 说明 | 字段类型 | 是否必填 | 默认值 |
---|---|---|---|---|
value | 参数值 | String,Number | true | - |
label | 字段别名 | String | true | - |
disabled | 设置为禁用状态 | Boolean | false | false |
Props
属性名 | 说明 | 类型 | Default |
---|---|---|---|
multiple | 是否多选 | boolean | false |
disabled | 是否禁用 | boolean | false |
valueKey | 作为 value 唯一标识的键名,绑定值为对象类型时必填 | string | value |
size | 输入框尺寸 | enum | — |
clearable | 是否可以清空选项 | boolean | false |
collapseTags | 多选时是否将选中值按文字的形式展示 | boolean | false |
collapseTagsTooltip | 当鼠标悬停于折叠标签的文本时,是否显示所有选中的标签。 要使用此属性,collapse-tags 属性必须设定为 true | boolean | false |
multipleLimit | multiple 属性设置为 true 时,代表多选场景下用户最多可以选择的项目数, 为 0 则不限制 | number | 0 |
name | Select 输入框的原生 name 属性 | string | — |
effect | tooltip 主题,内置了 dark / light 两种 | enum / string | light |
autocomplete | Select 输入框的原生 autocomplete 属性 | string | off |
placeholder | 占位符,默认为“Select” | string | — |
filterable | Select 组件是否可筛选 | boolean | false |
allowCreate | 是否允许用户创建新条目, 只有当 filterable 设置为 true 时才会生效。 | boolean | false |
filterMethod | 自定义筛选方法 | Function | — |
remote | 其中的选项是否从服务器远程加载 | boolean | false |
remoteMethod | 自定义远程搜索方法 | Function | — |
remoteShowSuffix | 远程搜索方法显示后缀图标 | boolean | false |
loading | 是否正在从远程获取数据 | boolean | false |
loadingText | 从服务器加载数据时显示的文本,默认为“Loading” | string | — |
noMatchText | 搜索条件无匹配时显示的文字,也可以使用 empty 插槽设置,默认是 “No matching data'” | string | — |
noDataText | 无选项时显示的文字,也可以使用 empty 插槽设置自定义内容,默认是 “No data” | string | — |
popperClass | 选择器下拉菜单的自定义类名 | string | '' |
reserveKeyword | 当 multiple 和 filterable 被设置为 true 时,是否在选中一个选项后保留当前的搜索关键词 | boolean | true |
defaultFirstOption | 是否在输入框按下回车时,选择第一个匹配项。 需配合 filterable 或 remote 使用 | boolean | false |
teleported | 是否使用 teleport。设置成 true 则会被追加到 append-to 的位置 | boolean | true |
appendTo | 下拉框挂载到哪个 DOM 元素 | CSSSelector / HTMLElement | — |
persistent | 当下拉选择器未被激活并且persistent 设置为false ,选择器会被删除。 | boolean | true |
automaticDropdown | 对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单 | boolean | false |
clearIcon | 自定义清除图标 | string / object | CircleClose |
fitInputWidth | 下拉框的宽度是否与输入框相同 | boolean | false |
suffixIcon | 自定义后缀图标组件 | string / object | ArrowDown |
tagType | 标签类型 | enum | info |
tagEffect | 标签效果 | enum | light |
validateEvent | 是否触发表单验证 | boolean | true |
offset | 下拉面板偏移量 | number | 12 |
showArrow | 下拉菜单的内容是否有箭头 | boolean | true |
placement | 下拉框出现的位置 | enum | bottom-start |
fallbackPlacements | dropdown 可用的 positions 请查看popper.js 文档 | array | ['bottom-start', 'top-start', 'right', 'left'] |
maxCollapseTags | 需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。 | number | 1 |
popperOptions | popper.js 参数 | object refer to popper.js doc | {} |
ariaLabel | 等价于原生 input aria-label 属性 | string | — |
emptyValues | 组件的空值配置 参考config-provider | array | — |
valueOnClear | 清空选项的值 参考 config-provider | string / number / boolean / Function | — |
tabindex | input 的 tabindex | string / number | — |
Events
事件名 | 说明 | Type |
---|---|---|
change | 选中值发生变化时触发 | Function |
visible-change | 下拉框出现/隐藏时触发 | Function |
remove-tag | 多选模式下移除tag时触发 | Function |
clear | 可清空的单选模式下用户点击清空按钮时触发 | Function |
blur | 当 input 失去焦点时触发 | Function |
focus | 当 input 获得焦点时触发 | Function |
popup-scroll 2.9.4 | 下拉滚动时触发 | Function |
Slots
插槽名 | 说明 | 子标签 |
---|---|---|
default | option 组件列表 | Option Group / Option |
header 2.4.3 | 下拉列表顶部的内容 | — |
footer 2.4.3 | 下拉列表底部的内容 | — |
prefix | Select 组件头部内容 | — |
empty | 无选项时的列表 | — |
tag 2.5.0 | select 组件自定义标签内容 | — |
loading 2.5.2 | select 组件自定义 loading内容 | — |
label 2.7.4 | select 组件自定义标签内容 | — |