Ant Design Vue AutoComplete 属性列表

本文列出了Ant Design Vue AutoComplete组件的全部属性及其的使用说明。

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

node.js webpack开发方式用例

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

浏览器方式

<!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>

例子