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
    },
}

参考:Ant-design-vue_Select

value :Number | String | Array

Options

字段名说明字段类型是否必填默认值
value参数值String,Numbertrue-
label字段别名Stringtrue-
disabled设置为禁用状态Booleanfalsefalse

Props

参数说明类型默认值
allowClear支持清除booleanfalse
autoClearSearchValue是否在选中项后清空搜索框,只在 modemultipletags 时有效。booleantrue
autofocus默认获取焦点booleanfalse
bordered是否有边框booleantrue
clearIcon自定义的多选框清空图标VNode | slot-
defaultActiveFirstOption是否默认高亮第一个选项。booleantrue
defaultOpen是否默认展开下拉菜单boolean-
disabled是否禁用booleanfalse
popupClassName下拉菜单的 className 属性string-
dropdownMatchSelectWidth下拉菜单和选择器同宽。默认将设置 min-width,当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动boolean | numbertrue
dropdownMenuStyledropdown 菜单自定义样式object-
dropdownRender自定义下拉框内容({menuNode: VNode, props}) => VNode | v-slot-
dropdownStyle下拉菜单的 style 属性object-
fieldNames自定义节点 label、value、options 的字段object{ label: label, value: value, options: options }
filterOption是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 falsebooleanfunction(inputValue, option)
filterSort搜索时对筛选结果项的排序函数, 类似Array.sort里的 compareFunction(optionA: Option, optionB: Option) => number-
firstActiveValue默认高亮的选项string | string[]-
getPopupContainer菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。function(triggerNode)() => document.body
labelInValue是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 string 变为 {key: string, label: vNodes, originLabel: any} 的格式, originLabel(3.1) 保持原始类型,如果通过 a-select-option children 构造的节点,该值是是个函数(即 a-select-option 的默认插槽)booleanfalse
listHeight设置弹窗滚动高度number256
maxTagCount最多显示多少个 tagnumber-
maxTagPlaceholder隐藏 tag 时显示的内容slot | function(omittedValues)-
maxTagTextLength最大显示的 tag 文本长度number-
menuItemSelectedIcon自定义当前选中的条目图标VNode | slot-
mode设置 Select 的模式为多选或标签'multiple' | 'tags' | 'combobox'-
notFoundContent当下拉列表为空时显示的内容string|slotNot Found
open是否展开下拉菜单boolean-
option通过 option 插槽,自定义节点v-slot:option="{value, label, [disabled, key, title]}"-
optionFilterProp搜索时过滤对应的 option 属性,不支持 childrenstringvalue
optionLabelProp回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 valuestringchildren
optionsoptions 数据,如果设置则不需要手动构造 selectOption 节点Array<{value, label, [disabled, key, title]}>[]
placeholder选择框默认文字string|slot-
placement选择框弹出的位置bottomLeft bottomRight topLeft topRightbottomLeft
removeIcon自定义的多选框清除图标VNode | slot-
searchValue控制搜索文本string-
showArrow是否显示下拉小箭头boolean单选为 true,多选为 false
showSearch配置是否可搜索boolean单选为 false,多选为 true
size选择框大小,可选 large smallstringdefault
status设置校验状态'error' | 'warning'-
suffixIcon自定义的选择框后缀图标VNode | slot-
tagRender自定义 tag 内容 render,仅在 modemultipletags 时生效slot | (props) => any-
tokenSeparators自动分词的分隔符,仅在 mode="tags" 时生效string[]-
virtual设置 false 时关闭虚拟滚动booleantrue

Events

事件名称说明回调参数
blur失去焦点的时回调function
change选中 option,或 input 的 value 变化(combobox 模式下)时,调用此函数function(value, option:Option | Array<Option>)
deselect取消选中时调用,参数为选中项的 value (或 key) 值,仅在 multiple 或 tags 模式下生效function(value,option:Option)
dropdownVisibleChange展开下拉菜单的回调function(open)
focus获得焦点时回调function
inputKeyDown键盘按下时回调function
mouseenter鼠标移入时回调function
mouseleave鼠标移出时回调function
popupScroll下拉列表滚动时的回调function
search文本框值变化时回调function(value: string)
select被选中时调用,参数为选中项的 value (或 key) 值function(value, option:Option)

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