Ant Design Vue Select 属性和事件

Ant Design Vue Select 属性和事件列表，将列举如何使用Select的属性和事件。

属性用例

我们将以Select的标签模式为例，演示如何使用maxTagPlaceholder属性，官方文档该属性说明如下

属性名称	说明	参数
maxTagPlaceholder	超过maxTagCount设置显示的标签数时，隐藏时显示的内容	slot/function(omittedValues)

slot插槽作为参数的代码

<template>
  <a-select mode="tags" :maxTagCount="2" :maxTagTextLength="6" 
   style="width: 300px" placeholder="属性演示" >
    <a-icon slot="maxTagPlaceholder" type="smile" />
    <a-select-option  value="baidu.com">www.baidu.com</a-select-option>
    <a-select-option  value="itxst.com">www.itxst.com</a-select-option>
    <a-select-option  value="google.com">www.google.com</a-select-option>
    <a-select-option  value="mircosoft.com">www.mircosoft.com</a-select-option>
  </a-select>
</template>

function函数作为参数的代码

<template>
  <a-select mode="tags" :maxTagPlaceholder="() => {return '+++'}" :maxTagCount="2" 
  :maxTagTextLength="6" style="width: 300px" placeholder="属性演示" >
    <a-select-option  value="baidu.com">www.baidu.com</a-select-option>
    <a-select-option  value="itxst.com">www.itxst.com</a-select-option>
    <a-select-option  value="google.com">www.google.com</a-select-option>
    <a-select-option  value="mircosoft.com">www.mircosoft.com</a-select-option>
  </a-select>
</template>

在线试一试

属性列表

属性名称	说明	参数	默认值
allowClear	清除图标	boolean	false
autoClearSearchValue	是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。	boolean	true
autoFocus	默认是否获取焦点	boolean	false
defaultActiveFirstOption	是否默认高亮第一个选项。	boolean	true
defaultValue	指定默认选中项	string\|string[]\|number\|number[]
disabled	是否禁用	boolean	false
dropdownClassName	下拉菜单的 className 属性	string	-
dropdownMatchSelectWidth	下拉菜单和选择器同宽	boolean	true
dropdownRender	自定义下拉框内容	(menuNode: VNode, props) => VNode
dropdownStyle	下拉菜单的 style 属性	object 比如{width:'200px',height:'100px'}
dropdownMenuStyle	dropdown 菜单自定义样式	object
filterOption	根据输入项进行筛选,返回ture表示显示	function(inputValue, option)
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[]
value(v-model)	指定当前选中的条目	string\|string[]\|number\|number[]
options	options 数据，如果设置则不需要手动构造 selectOption 节点	array<{value, label, [disabled, key, title]}>
defaultOpen	是否默认展开下拉菜单	boolean	-
open	是否展开下拉菜单	boolean	-