# Select 下拉选择框

# 规则

{
    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 (opens new window)

value :Number | String | Array

# options

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

# props

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

# on 事件

事件名称 说明 回调参数
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)