本文列出了Ant Design Vue AutoComplete组件的全部属性及其的使用说明。
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
allowClear | 当鼠标移入输入框会有清除图标, 单选模式有效 | boolean | false |
autoFocus | 自动获取焦点 | boolean | false |
backfill | 使用键盘操作选择选项的时把选中项回填到输入框中 | boolean | false |
slot="default" | 自定义输入框插槽 | HTMLInputElement / HTMLTextAreaElement | <Input /> |
dataSource | 选择项的数据源 | slot | 数组 | |
dropdownMenuStyle | dropdown 菜单的自定义样式,1.5.0及以上版本支持 | object | |
defaultActiveFirstOption | 是否默认高亮第1个选项。 | boolean | true |
defaultValue | 指定默认选中的项 | string|string[]| 无 | |
disabled | 是否禁用组件 | boolean | false |
filterOption | 自定义筛选函数返回true表示筛选成功 | boolean or function(inputValue, option) | true |
optionLabelProp | 回填到选择框的 Option 的属性值, 默认是 Option 的子元素。 比如在子元素需要高亮效果时,此值可以设为 value。 | string | children |
placeholder | 输入框提示 | string | slot | - |
value(v-model) | 指定当前选中的条目 设置了此值时 defaultValue无效 | string|string[]|{ key: string, label: string|vNodes }| Array<{ key: string, label: string|vNodes }> | |
defaultOpen | 是否默认展开下拉菜单 | boolean | |
open | 是否展开下拉菜单 | boolean |
<template>
<a-auto-complete
:allowClear="true"
:autoFocus="true"
:backfill="true"
:dataSource="ds"
class="certain-category-search"
dropdownClassName="certain-category-search-dropdown"
:dropdownMatchSelectWidth="false"
:dropdownStyle="{width: '300px'}"
size="large"
style="width: 300PX"
placeholder="请输入关键词"
optionLabelProp="selectvalue"
:defaultValue="defaultValue"
:disabled="false"
:filterOption="filterOption"
v-model="currVal"
:defaultOpen="false"
/>
</template>
<script>
export default {
data() {
return {
ds:['www.qq.com','www.msn.com','www.baidu.com','www.itxst.com'],
defaultValue:["www.msn.com"], //默认选中
currVal:["www.baidu.com"] ,
};
},
methods: {
filterOption(input, option) {
return (
option.componentOptions.children[0].text.indexOf(input)>=0
);
},
},
};
</script>
copy
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Ant Design Vue AutoComplete 属性列表例子</title> <script src="https://www.itxst.com/package/vue/vue.min.js"></script> <script src="https://www.itxst.com/package/ant-design-vue/antd.min.js"></script> <link href="https://www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" /> <style> body { padding-top: 10px } .ant-pagination-item-link.red { color: red; padding-left: 6px; padding-right: 6px; } </style> </head> <body> <div id="app"> <a-auto-complete :allow-clear="true" :auto-focus="true" :backfill="true" :data-source="ds" class="certain-category-search" dropdown-className="certain-category-search-dropdown" :dropdown-match-select-width="false" :dropdown-style="{width: '300px'}" size="large" style="width: 300PX" placeholder="请输入关键词" option-label-prop="selectvalue" :default-value="defaultValue" :disabled="false" :filter-option="filterOption" v-model="currVal" :default-open="false" /> </div> <script> var app = new Vue({ el: '#app', data() { return { ds:['www.qq.com','www.msn.com','www.baidu.com','www.itxst.com'], defaultValue:["www.msn.com"], //默认选中 currVal:["www.baidu.com"] }; }, methods: { filterOption(input, option) { return ( option.componentOptions.children[0].text.indexOf(input)>=0 ); }, }, }); </script> </body> </html>
copy