Skip to content

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,Numbertrue-
label字段别名Stringtrue-
disabled设置为禁用状态Booleanfalsefalse

Props

属性名说明类型Default
multiple是否多选booleanfalse
disabled是否禁用booleanfalse
valueKey作为 value 唯一标识的键名,绑定值为对象类型时必填stringvalue
size输入框尺寸enum
clearable是否可以清空选项booleanfalse
collapseTags多选时是否将选中值按文字的形式展示booleanfalse
collapseTagsTooltip当鼠标悬停于折叠标签的文本时,是否显示所有选中的标签。 要使用此属性,collapse-tags属性必须设定为 truebooleanfalse
multipleLimitmultiple 属性设置为 true 时,代表多选场景下用户最多可以选择的项目数, 为 0 则不限制number0
nameSelect 输入框的原生 name 属性string
effecttooltip 主题,内置了 dark / light 两种enum / stringlight
autocompleteSelect 输入框的原生 autocomplete 属性stringoff
placeholder占位符,默认为“Select”string
filterableSelect 组件是否可筛选booleanfalse
allowCreate是否允许用户创建新条目, 只有当 filterable 设置为 true 时才会生效。booleanfalse
filterMethod自定义筛选方法Function
remote其中的选项是否从服务器远程加载booleanfalse
remoteMethod自定义远程搜索方法Function
remoteShowSuffix远程搜索方法显示后缀图标booleanfalse
loading是否正在从远程获取数据booleanfalse
loadingText从服务器加载数据时显示的文本,默认为“Loading”string
noMatchText搜索条件无匹配时显示的文字,也可以使用 empty 插槽设置,默认是 “No matching data'”string
noDataText无选项时显示的文字,也可以使用 empty 插槽设置自定义内容,默认是 “No data”string
popperClass选择器下拉菜单的自定义类名string''
reserveKeywordmultiplefilterable被设置为 true 时,是否在选中一个选项后保留当前的搜索关键词booleantrue
defaultFirstOption是否在输入框按下回车时,选择第一个匹配项。 需配合 filterableremote 使用booleanfalse
teleported是否使用 teleport。设置成 true则会被追加到 append-to 的位置booleantrue
appendTo下拉框挂载到哪个 DOM 元素CSSSelector / HTMLElement
persistent当下拉选择器未被激活并且persistent设置为false,选择器会被删除。booleantrue
automaticDropdown对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单booleanfalse
clearIcon自定义清除图标string / objectCircleClose
fitInputWidth下拉框的宽度是否与输入框相同booleanfalse
suffixIcon自定义后缀图标组件string / objectArrowDown
tagType标签类型enuminfo
tagEffect标签效果enumlight
validateEvent是否触发表单验证booleantrue
offset下拉面板偏移量number12
showArrow下拉菜单的内容是否有箭头booleantrue
placement下拉框出现的位置enumbottom-start
fallbackPlacementsdropdown 可用的 positions 请查看popper.js 文档array['bottom-start', 'top-start', 'right', 'left']
maxCollapseTags需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。number1
popperOptionspopper.js 参数objectrefer to popper.js doc{}
ariaLabel等价于原生 input aria-label 属性string
emptyValues组件的空值配置 参考config-providerarray
valueOnClear清空选项的值 参考 config-providerstring / number / boolean / Function
tabindexinput 的 tabindexstring / 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

插槽名说明子标签
defaultoption 组件列表Option Group / Option
header 2.4.3下拉列表顶部的内容
footer 2.4.3下拉列表底部的内容
prefixSelect 组件头部内容
empty无选项时的列表
tag 2.5.0select 组件自定义标签内容
loading 2.5.2select 组件自定义 loading内容
label 2.7.4select 组件自定义标签内容

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用