Ant Design Vue AutoComplete 属性列表

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

AutoComplete 属性列表

属性
说明
类型默认值
allowClear当鼠标移入输入框会有清除图标, 单选模式有效booleanfalse
autoFocus自动获取焦点booleanfalse
backfill使用键盘操作选择选项的时把选中项回填到输入框中booleanfalse
slot="default"自定义输入框插槽HTMLInputElement
/ HTMLTextAreaElement
<Input />
dataSource选择项的数据源slot | 数组
dropdownMenuStyledropdown 菜单的自定义样式,1.5.0及以上版本支持object
defaultActiveFirstOption是否默认高亮第1个选项。booleantrue
defaultValue指定默认选中的项string|string[]| 无
disabled是否禁用组件booleanfalse
filterOption自定义筛选函数返回true表示筛选成功boolean or
function(inputValue, option)
true
optionLabelProp回填到选择框的 Option 的属性值,
默认是 Option 的子元素。
比如在子元素需要高亮效果时,此值可以设为 value。
stringchildren
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="http://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="http://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
    <link href="http://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>

例子