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
defaultActiveFirstOption是否默认高亮第一个选项。booleantrue
disabled是否禁用booleanfalse
dropdownClassName下拉菜单的 className 属性string-
dropdownMatchSelectWidth下拉菜单和选择器同宽booleantrue
dropdownRender自定义下拉框内容(menuNode: VNode, props) => VNode-
dropdownStyle下拉菜单的 style 属性object-
dropdownMenuStyledropdown 菜单自定义样式object-
filterOption是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue``option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 falseboolean or function(inputValue, option)true
firstActiveValue默认高亮的选项string|string[]-
getPopupContainer菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。Function(triggerNode)() => document.body
labelInValue是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 string 变为 {key: string, label: vNodes} 的格式booleanfalse
maxTagCount最多显示多少个 tagnumber-
maxTagPlaceholder隐藏 tag 时显示的内容slot/function(omittedValues)-
maxTagTextLength最大显示的 tag 文本长度number-
mode设置 Select 的模式为多选或标签'default' | 'multiple' | 'tags' | 'combobox'-
notFoundContent当下拉列表为空时显示的内容string|slot'Not Found'
optionFilterProp搜索时过滤对应的 option 属性,如设置为 children 表示对内嵌内容进行搜索stringvalue
optionLabelProp回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 valuestringchildren(combobox 模式下为 value
placeholder选择框默认文字string|slot-
showSearch使单选模式可搜索booleanfalse
showArrow是否显示下拉小箭头booleantrue
size选择框大小,可选 large smallstringdefault
suffixIcon自定义的选择框后缀图标VNode | slot-
removeIcon自定义的多选框清除图标VNode | slot-
clearIcon自定义的多选框清空图标VNode | slot-
menuItemSelectedIcon自定义当前选中的条目图标VNode | slot-
tokenSeparators在 tags 和 multiple 模式下自动分词的分隔符string[]
optionsoptions 数据,如果设置则不需要手动构造 selectOption 节点array<{value, label, [disabled, key, title]}>[]
defaultOpen是否默认展开下拉菜单boolean-
open是否展开下拉菜单boolean-

Events

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

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