From 7a8bef0ef3e2ad60bdd87f626cd1f268e7d846f2 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sat, 8 Feb 2020 13:26:18 +0800
Subject: [PATCH] feat: update auto-complete

---
 build/config.js                               |  2 +-
 components/auto-complete/InputElement.jsx     | 11 ---
 .../__tests__/__snapshots__/demo.test.js.snap | 33 +++++---
 components/auto-complete/demo/basic.md        | 23 +++++-
 .../auto-complete/demo/certain-category.md    | 82 +++++++++----------
 .../auto-complete/demo/uncertain-category.md  | 24 +++---
 components/auto-complete/index.en-US.md       | 57 ++++++-------
 components/auto-complete/index.jsx            |  1 +
 components/auto-complete/index.zh-CN.md       | 41 +++++-----
 9 files changed, 150 insertions(+), 124 deletions(-)

diff --git a/build/config.js b/build/config.js
index 24a3cbe38..7695f23eb 100644
--- a/build/config.js
+++ b/build/config.js
@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'anchor', // dev components
+    componentName: 'auto-complete', // dev components
   },
 };
diff --git a/components/auto-complete/InputElement.jsx b/components/auto-complete/InputElement.jsx
index 2ba4e1a4e..131b3bf0a 100644
--- a/components/auto-complete/InputElement.jsx
+++ b/components/auto-complete/InputElement.jsx
@@ -20,17 +20,6 @@ export default {
     disabled: PropTypes.bool,
     placeholder: PropTypes.string,
   },
-  methods: {
-    focus() {
-      const ele = this.$refs.ele;
-      ele.focus ? ele.focus() : this.$el.focus();
-    },
-    blur() {
-      const ele = this.$refs.ele;
-      ele.blur ? ele.blur() : this.$el.blur();
-    },
-  },
-
   render() {
     const { $slots = {}, $attrs = {}, placeholder } = this;
     const listeners = getListeners(this);
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index 0c067869c..f883b4407 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -1,15 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
-<div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
-  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
-    <div class="ant-select-selection__rendered">
-      <ul>
-        <li class="ant-select-search ant-select-search--inline">
-          <div class="ant-select-search__field__wrap"><input placeholder="input here" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
-        </li>
-      </ul>
-    </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
+<div>
+  <div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
+    <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
+      <div class="ant-select-selection__rendered">
+        <ul>
+          <li class="ant-select-search ant-select-search--inline">
+            <div class="ant-select-search__field__wrap"><input placeholder="input here" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+          </li>
+        </ul>
+      </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
+    </div>
+  </div> <br> <br>
+  <div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
+    <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
+      <div class="ant-select-selection__rendered">
+        <ul>
+          <li class="ant-select-search ant-select-search--inline">
+            <div class="ant-select-search__field__wrap"><input placeholder="control mode" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+          </li>
+        </ul>
+      </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
+    </div>
   </div>
 </div>
 `;
@@ -79,7 +92,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
       <div class="ant-select-selection__rendered">
         <ul>
           <li class="ant-select-search ant-select-search--inline">
-            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input placeholder="input here" type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input placeholder="input here" type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg" style="margin-right: -12px;"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
           </li>
         </ul>
       </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
diff --git a/components/auto-complete/demo/basic.md b/components/auto-complete/demo/basic.md
index 2c2317194..397ecc195 100644
--- a/components/auto-complete/demo/basic.md
+++ b/components/auto-complete/demo/basic.md
@@ -10,28 +10,45 @@ Basic Usage, set datasource of autocomplete with `dataSource` property.
 
 ```tpl
 <template>
+<div>
   <a-auto-complete
     :dataSource="dataSource"
     style="width: 200px"
     @select="onSelect"
-    @search="handleSearch"
+    @search="onSearch"
     placeholder="input here"
   />
+  <br />
+  <br />
+  <a-auto-complete
+    :value="value"
+    :dataSource="dataSource"
+    style="width: 200px"
+    @select="onSelect"
+    @search="onSearch"
+    @change="onChange"
+    placeholder="control mode"
+  />
+</div>
 </template>
 <script>
   export default {
     data() {
       return {
+        value: '',
         dataSource: [],
       };
     },
     methods: {
-      handleSearch(value) {
-        this.dataSource = !value ? [] : [value, value + value, value + value + value];
+      onSearch(searchText) {
+        this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
       },
       onSelect(value) {
         console.log('onSelect', value);
       },
+      onChange(value) {
+        this.value = value;
+      }
     },
   };
 </script>
diff --git a/components/auto-complete/demo/certain-category.md b/components/auto-complete/demo/certain-category.md
index 930398dd0..77b5920cd 100644
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@@ -30,17 +30,17 @@ Lookup-Patterns - Certain Category
               href="https://www.google.com/search?q=antd"
               target="_blank"
               rel="noopener noreferrer"
-              >更多
+              >more
             </a>
           </span>
           <a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">
             {{opt.title}}
-            <span class="certain-search-item-count">{{opt.count}} 人 关注</span>
+            <span class="certain-search-item-count">{{opt.count}} people</span>
           </a-select-option>
         </a-select-opt-group>
         <a-select-option disabled key="all" class="show-all">
-          <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
-            查看所有结果
+          <a href="https://www.google.com/search?q=ant-design-vue" target="_blank" rel="noopener noreferrer">
+            View all results
           </a>
         </a-select-option>
       </template>
@@ -51,43 +51,43 @@ Lookup-Patterns - Certain Category
   </div>
 </template>
 <script>
-  const dataSource = [
-    {
-      title: '话题',
-      children: [
-        {
-          title: 'AntDesign',
-          count: 10000,
-        },
-        {
-          title: 'AntDesign UI',
-          count: 10600,
-        },
-      ],
-    },
-    {
-      title: '问题',
-      children: [
-        {
-          title: 'AntDesign UI 有多好',
-          count: 60100,
-        },
-        {
-          title: 'AntDesign 是啥',
-          count: 30010,
-        },
-      ],
-    },
-    {
-      title: '文章',
-      children: [
-        {
-          title: 'AntDesign 是一个设计语言',
-          count: 100000,
-        },
-      ],
-    },
-  ];
+const dataSource = [
+  {
+    title: 'Libraries',
+    children: [
+      {
+        title: 'AntDesign',
+        count: 10000,
+      },
+      {
+        title: 'AntDesign UI',
+        count: 10600,
+      },
+    ],
+  },
+  {
+    title: 'Solutions',
+    children: [
+      {
+        title: 'AntDesign UI',
+        count: 60100,
+      },
+      {
+        title: 'AntDesign',
+        count: 30010,
+      },
+    ],
+  },
+  {
+    title: 'Articles',
+    children: [
+      {
+        title: 'AntDesign design language',
+        count: 100000,
+      },
+    ],
+  },
+];
   export default {
     data() {
       return {
diff --git a/components/auto-complete/demo/uncertain-category.md b/components/auto-complete/demo/uncertain-category.md
index ee29a0031..17a8a38d7 100644
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@@ -22,7 +22,7 @@ Lookup-Patterns - Uncertain Category
     >
       <template slot="dataSource">
         <a-select-option v-for="item in dataSource" :key="item.category" :text="item.category">
-          {{item.query}} 在
+          Found {{item.query}} on
           <a
             :href="`https://s.taobao.com/search?q=${item.query}`"
             target="_blank"
@@ -30,12 +30,11 @@ Lookup-Patterns - Uncertain Category
           >
             {{item.category}}
           </a>
-          区块中
-          <span className="global-search-item-count">约 {{item.count}} 个结果</span>
+          <span className="global-search-item-count">{{item.count}} results</span>
         </a-select-option>
       </template>
       <a-input>
-        <a-button slot="suffix" class="search-btn" size="large" type="primary">
+        <a-button slot="suffix" style="margin-right: -12px" class="search-btn" size="large" type="primary">
           <a-icon type="search" />
         </a-button>
       </a-input>
@@ -93,18 +92,23 @@ Lookup-Patterns - Uncertain Category
     padding-right: 62px;
   }
 
-  .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
-    right: 0;
-  }
-
   .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
+  .global-search-item {
+    display: flex;
+  }
+
+  .global-search-item-desc {
+    flex: auto;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   .global-search-item-count {
-    position: absolute;
-    right: 16px;
+    flex: none;
   }
 </style>
 ```
diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md
index e92257329..4a459568d 100644
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -4,37 +4,38 @@
 <a-auto-complete :dataSource="dataSource" />
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
-| autoFocus | get focus when component mounted | boolean | false |
-| backfill | backfill selected item the input when using keyboard | boolean | false |
-| slot="default" (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` |
-| dataSource | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |
-| defaultActiveFirstOption | Whether active first option by default | boolean | true |
-| defaultValue | Initial selected option. | string\|string\[]\| - |
-| disabled | Whether disabled select | boolean | false |
-| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
-| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
-| placeholder | placeholder of input | string | - |
-| value(v-model) | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - |
-| defaultOpen | Initial open state of dropdown | boolean | - |
-| open | Controlled open state of dropdown | boolean | - |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| allowClear | Show clear button, effective in multiple mode only. | boolean | false |  |
+| autoFocus | get focus when component mounted | boolean | false |  |
+| backfill | backfill selected item the input when using keyboard | boolean | false |  |
+| slot="default" (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` |  |
+| dataSource | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
+| dropdownMenuStyle | additional style applied to dropdown menu | object |  | 1.5.0 |
+| defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
+| defaultValue | Initial selected option. | string\|string\[]\| - |  |
+| disabled | Whether disabled select | boolean | false |  |
+| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |  |
+| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |  |
+| placeholder | placeholder of input | string | - |  |
+| value(v-model) | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - |  |
+| defaultOpen | Initial open state of dropdown | boolean | - |  |
+| open | Controlled open state of dropdown | boolean | - |  |
 
 ### events
 
-| Events Name | Description | Arguments |
-| --- | --- | --- |
-| change | Called when select an option or input value change, or value of input is changed | function(value) |
-| blur | Called when leaving the component. | function() |
-| focus | Called when entering the component | function() |
-| search | Called when searching items. | function(value) | - |
-| select | Called when a option is selected. param is option's value and option instance. | function(value, option) |
-| dropdownVisibleChange | Call when dropdown open | function(open) |
+| Events Name | Description | Arguments | Version |
+| --- | --- | --- | --- |
+| change | Called when select an option or input value change, or value of input is changed | function(value) |  |
+| blur | Called when leaving the component. | function() |  |
+| focus | Called when entering the component | function() |  |
+| search | Called when searching items. | function(value) | - |  |
+| select | Called when a option is selected. param is option's value and option instance. | function(value, option) |  |
+| dropdownVisibleChange | Call when dropdown open | function(open) |  |
 
 ## Methods
 
-| Name    | Description  |
-| ------- | ------------ |
-| blur()  | remove focus |
-| focus() | get focus    |
+| Name    | Description  | Version |
+| ------- | ------------ | ------- |
+| blur()  | remove focus |         |
+| focus() | get focus    |         |
diff --git a/components/auto-complete/index.jsx b/components/auto-complete/index.jsx
index 05ad955fd..0d5d93814 100644
--- a/components/auto-complete/index.jsx
+++ b/components/auto-complete/index.jsx
@@ -32,6 +32,7 @@ const AutoCompleteProps = {
   value: SelectValue,
   defaultValue: SelectValue,
   dataSource: PropTypes.array,
+  dropdownMenuStyle: PropTypes.object,
   optionLabelProp: String,
   dropdownMatchSelectWidth: PropTypes.bool,
   // onChange?: (value: SelectValue) => void;
diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md
index fe8ad4a31..d5efaf39f 100644
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -4,27 +4,28 @@
 <a-auto-complete :dataSource="dataSource" />
 ```
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| allowClear | 支持清除, 单选模式有效 | boolean | false |
-| autoFocus | 自动获取焦点 | boolean | false |
-| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |
-| slot="default" (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` |
-| dataSource | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |
-| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
-| defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 |
-| disabled | 是否禁用 | boolean | false |
-| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
-| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
-| placeholder | 输入框提示 | string \| slot | - |
-| value(v-model) | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 |
-| defaultOpen | 是否默认展开下拉菜单 | boolean | - |
-| open | 是否展开下拉菜单 | boolean | - |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| allowClear | 支持清除, 单选模式有效 | boolean | false |  |
+| autoFocus | 自动获取焦点 | boolean | false |  |
+| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
+| slot="default" (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` |  |
+| dataSource | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
+| dropdownMenuStyle | dropdown 菜单自定义样式 | object |  | 1.5.0 |
+| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |  |
+| defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 |  |
+| disabled | 是否禁用 | boolean | false |  |
+| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |  |
+| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |  |
+| placeholder | 输入框提示 | string \| slot | - |  |
+| value(v-model) | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 |  |
+| defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
+| open | 是否展开下拉菜单 | boolean | - |  |
 
 ### 事件
 
-| 事件名称 | 说明 | 回调参数 |
-| --- | --- | --- |
+| 事件名称 | 说明 | 回调参数 | 版本 |
+| --- | --- | --- | --- |
 | change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) |
 | blur | 失去焦点时的回调 | function() |
 | focus | 获得焦点时的回调 | function() |
@@ -34,7 +35,7 @@
 
 ## 方法
 
-| 名称    | 描述     |
-| ------- | -------- |
+| 名称    | 描述     | 版本 |
+| ------- | -------- | ---- |
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |