Select选择器 - 图1

Select 选择器

下拉选择器。

何时使用

  • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
  • 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。

代码演示

Select选择器 - 图2

基本使用

基本使用。

  1. <template>
  2.   <div>
  3.     <a-select default-value="lucy" style="width: 120px" @change="handleChange">
  4.       <a-select-option value="jack">
  5.         Jack
  6.       </a-select-option>
  7.       <a-select-option value="lucy">
  8.         Lucy
  9.       </a-select-option>
  10.       <a-select-option value="disabled" disabled>
  11.         Disabled
  12.       </a-select-option>
  13.       <a-select-option value="Yiminghe">
  14.         yiminghe
  15.       </a-select-option>
  16.     </a-select>
  17.     <a-select default-value="lucy" style="width: 120px" disabled>
  18.       <a-select-option value="lucy">
  19.         Lucy
  20.       </a-select-option>
  21.     </a-select>
  22.     <a-select default-value="lucy" style="width: 120px" loading>
  23.       <a-select-option value="lucy">
  24.         Lucy
  25.       </a-select-option>
  26.     </a-select>
  27.   </div>
  28. </template>
  29. <script>
  30. export default {
  31.   methods: {
  32.     handleChange(value) {
  33.       console.log(`selected ${value}`);
  34.     },
  35.   },
  36. };
  37. </script>

Select选择器 - 图3

标签

tags select，随意输入的内容（scroll the menu）

  1. <template>
  2.   <a-select mode="tags" style="width: 100%" placeholder="Tags Mode" @change="handleChange">
  3.     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  4.       {{ (i + 9).toString(36) + i }}
  5.     </a-select-option>
  6.   </a-select>
  7. </template>
  8. <script>
  9. export default {
  10.   methods: {
  11.     handleChange(value) {
  12.       console.log(`selected ${value}`);
  13.     },
  14.   },
  15. };
  16. </script>

Select选择器 - 图4

获得选项的文本

默认情况下 onChange 里只能拿到 value，如果需要拿到选中的节点文本 label，可以使用 labelInValue 属性。
选中项的 label 会被包装到 value 中传递给 onChange 等函数，此时 value 是一个对象。 

  1. <template>
  2.   <a-select
  3.     label-in-value
  4.     :default-value="{ key: 'lucy' }"
  5.     style="width: 120px"
  6.     @change="handleChange"
  7.   >
  8.     <a-select-option value="jack">
  9.       Jack (100)
  10.     </a-select-option>
  11.     <a-select-option value="lucy">
  12.       Lucy (101)
  13.     </a-select-option>
  14.   </a-select>
  15. </template>
  16. <script>
  17. export default {
  18.   methods: {
  19.     handleChange(value) {
  20.       console.log(value); // { key: "lucy", label: "Lucy (101)" }
  21.     },
  22.   },
  23. };
  24. </script>

Select选择器 - 图5

联动

省市联动是典型的例子。
推荐使用 Cascader 组件。 

  1. <template>
  2.   <div>
  3.     <a-select :default-value="provinceData[0]" style="width: 120px" @change="handleProvinceChange">
  4.       <a-select-option v-for="province in provinceData" :key="province">
  5.         {{ province }}
  6.       </a-select-option>
  7.     </a-select>
  8.     <a-select v-model="secondCity" style="width: 120px">
  9.       <a-select-option v-for="city in cities" :key="city">
  10.         {{ city }}
  11.       </a-select-option>
  12.     </a-select>
  13.   </div>
  14. </template>
  15. <script>
  16. const provinceData = ['Zhejiang', 'Jiangsu'];
  17. const cityData = {
  18.   Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  19.   Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
  20. };
  21. export default {
  22.   data() {
  23.     return {
  24.       provinceData,
  25.       cityData,
  26.       cities: cityData[provinceData[0]],
  27.       secondCity: cityData[provinceData[0]][0],
  28.     };
  29.   },
  30.   methods: {
  31.     handleProvinceChange(value) {
  32.       this.cities = cityData[value];
  33.       this.secondCity = cityData[value][0];
  34.     },
  35.   },
  36. };
  37. </script>

Select选择器 - 图6

搜索框

搜索和远程数据结合。

  1. <template>
  2.   <a-select
  3.     show-search
  4.     :value="value"
  5.     placeholder="input search text"
  6.     style="width: 200px"
  7.     :default-active-first-option="false"
  8.     :show-arrow="false"
  9.     :filter-option="false"
  10.     :not-found-content="null"
  11.     @search="handleSearch"
  12.     @change="handleChange"
  13.   >
  14.     <a-select-option v-for="d in data" :key="d.value">
  15.       {{ d.text }}
  16.     </a-select-option>
  17.   </a-select>
  18. </template>
  19. <script>
  20. import jsonp from 'fetch-jsonp';
  21. import querystring from 'querystring';
  23. let timeout;
  24. let currentValue;
  26. function fetch(value, callback) {
  27.   if (timeout) {
  28.     clearTimeout(timeout);
  29.     timeout = null;
  30.   }
  31.   currentValue = value;
  33.   function fake() {
  34.     const str = querystring.encode({
  35.       code: 'utf-8',
  36.       q: value,
  37.     });
  38.     jsonp(`https://suggest.taobao.com/sug?${str}`)
  39.       .then(response => response.json())
  40.       .then(d => {
  41.         if (currentValue === value) {
  42.           const result = d.result;
  43.           const data = [];
  44.           result.forEach(r => {
  45.             data.push({
  46.               value: r[0],
  47.               text: r[0],
  48.             });
  49.           });
  50.           callback(data);
  51.         }
  52.       });
  53.   }
  55.   timeout = setTimeout(fake, 300);
  56. }
  57. export default {
  58.   data() {
  59.     return {
  60.       data: [],
  61.       value: undefined,
  62.     };
  63.   },
  64.   methods: {
  65.     handleSearch(value) {
  66.       fetch(value, data => (this.data = data));
  67.     },
  68.     handleChange(value) {
  69.       console.log(value);
  70.       this.value = value;
  71.       fetch(value, data => (this.data = data));
  72.     },
  73.   },
  74. };
  75. </script>

Select选择器 - 图7

搜索用户

一个带有远程搜索，节流控制，请求时序控制，加载状态的多选示例。

  1. <template>
  2.   <a-select
  3.     mode="multiple"
  4.     label-in-value
  5.     :value="value"
  6.     placeholder="Select users"
  7.     style="width: 100%"
  8.     :filter-option="false"
  9.     :not-found-content="fetching ? undefined : null"
  10.     @search="fetchUser"
  11.     @change="handleChange"
  12.   >
  13.     <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  14.     <a-select-option v-for="d in data" :key="d.value">
  15.       {{ d.text }}
  16.     </a-select-option>
  17.   </a-select>
  18. </template>
  19. <script>
  20. import debounce from 'lodash/debounce';
  22. export default {
  23.   data() {
  24.     this.lastFetchId = 0;
  25.     this.fetchUser = debounce(this.fetchUser, 800);
  26.     return {
  27.       data: [],
  28.       value: [],
  29.       fetching: false,
  30.     };
  31.   },
  32.   methods: {
  33.     fetchUser(value) {
  34.       console.log('fetching user', value);
  35.       this.lastFetchId += 1;
  36.       const fetchId = this.lastFetchId;
  37.       this.data = [];
  38.       this.fetching = true;
  39.       fetch('https://randomuser.me/api/?results=5')
  40.         .then(response => response.json())
  41.         .then(body => {
  42.           if (fetchId !== this.lastFetchId) {
  43.             // for fetch callback order
  44.             return;
  45.           }
  46.           const data = body.results.map(user => ({
  47.             text: `${user.name.first} ${user.name.last}`,
  48.             value: user.login.username,
  49.           }));
  50.           this.data = data;
  51.           this.fetching = false;
  52.         });
  53.     },
  54.     handleChange(value) {
  55.       Object.assign(this, {
  56.         value,
  57.         data: [],
  58.         fetching: false,
  59.       });
  60.     },
  61.   },
  62. };
  63. </script>

Select选择器 - 图8

隐藏已选择选项

隐藏下拉列表中已选择的选项。

  1. <template>
  2.   <a-select
  3.     mode="multiple"
  4.     placeholder="Inserted are removed"
  5.     :value="selectedItems"
  6.     style="width: 100%"
  7.     @change="handleChange"
  8.   >
  9.     <a-select-option v-for="item in filteredOptions" :key="item" :value="item">
  10.       {{ item }}
  11.     </a-select-option>
  12.   </a-select>
  13. </template>
  14. <script>
  15. const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
  16. export default {
  17.   data() {
  18.     return {
  19.       selectedItems: [],
  20.     };
  21.   },
  22.   computed: {
  23.     filteredOptions() {
  24.       return OPTIONS.filter(o => !this.selectedItems.includes(o));
  25.     },
  26.   },
  27.   methods: {
  28.     handleChange(selectedItems) {
  29.       this.selectedItems = selectedItems;
  30.     },
  31.   },
  32. };
  33. </script>

Select选择器 - 图9

定制回填内容

使用 optionLabelProp 指定回填到选择框的 Option 属性。

  1. <template>
  2.   <a-select
  3.     v-model="value"
  4.     mode="multiple"
  5.     style="width: 100%"
  6.     placeholder="select one country"
  7.     option-label-prop="label"
  8.   >
  9.     <a-select-option value="china" label="China">
  10.       <span role="img" aria-label="China">
  11.         🇨🇳
  12.       </span>
  13.       China (中国)
  14.     </a-select-option>
  15.     <a-select-option value="usa" label="USA">
  16.       <span role="img" aria-label="USA">
  17.         🇺🇸
  18.       </span>
  19.       USA (美国)
  20.     </a-select-option>
  21.     <a-select-option value="japan" label="Japan">
  22.       <span role="img" aria-label="Japan">
  23.         🇯🇵
  24.       </span>
  25.       Japan (日本)
  26.     </a-select-option>
  27.     <a-select-option value="korea" label="Korea">
  28.       <span role="img" aria-label="Korea">
  29.         🇰🇷
  30.       </span>
  31.       Korea (韩国)
  32.     </a-select-option>
  33.   </a-select>
  34. </template>
  35. <script>
  36. export default {
  37.   data() {
  38.     return {
  39.       value: ['china'],
  40.     };
  41.   },
  42.   watch: {
  43.     value(val) {
  44.       console.log(`selected:`, val);
  45.     },
  46.   },
  47. };
  48. </script>

Select选择器 - 图10

三种大小

三种大小的选择框，当 size 分别为 large 和 small 时，输入框高度为 40px 和 24px ，默认高度为 32px。

  1. <template>
  2.   <div>
  3.     <a-radio-group v-model="size">
  4.       <a-radio-button value="large">
  5.         Large
  6.       </a-radio-button>
  7.       <a-radio-button value="default">
  8.         Default
  9.       </a-radio-button>
  10.       <a-radio-button value="small">
  11.         Small
  12.       </a-radio-button>
  13.     </a-radio-group>
  14.     <br /><br />
  15.     <a-select :size="size" default-value="a1" style="width: 200px" @change="handleChange">
  16.       <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  17.         {{ (i + 9).toString(36) + i }}
  18.       </a-select-option>
  19.     </a-select>
  20.     <br />
  21.     <a-select
  22.       mode="multiple"
  23.       :size="size"
  24.       placeholder="Please select"
  25.       :default-value="['a1', 'b2']"
  26.       style="width: 200px"
  27.       @change="handleChange"
  28.       @popupScroll="popupScroll"
  29.     >
  30.       <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  31.         {{ (i + 9).toString(36) + i }}
  32.       </a-select-option>
  33.     </a-select>
  34.     <br />
  35.     <a-select
  36.       mode="tags"
  37.       :size="size"
  38.       placeholder="Please select"
  39.       :default-value="['a1', 'b2']"
  40.       style="width: 200px"
  41.       @change="handleChange"
  42.     >
  43.       <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  44.         {{ (i + 9).toString(36) + i }}
  45.       </a-select-option>
  46.     </a-select>
  47.   </div>
  48. </template>
  49. <script>
  50. export default {
  51.   data() {
  52.     return {
  53.       size: 'default',
  54.     };
  55.   },
  56.   methods: {
  57.     handleChange(value) {
  58.       console.log(`Selected: ${value}`);
  59.     },
  60.     popupScroll() {
  61.       console.log('popupScroll');
  62.     },
  63.   },
  64. };
  65. </script>

Select选择器 - 图11

自动分词

试下复制 露西,杰克 到输入框里。只在 tags 和 multiple 模式下可用。

  1. <template>
  2.   <a-select mode="tags" style="width: 100%" :token-separators="[',']" @change="handleChange">
  3.     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  4.       {{ (i + 9).toString(36) + i }}
  5.     </a-select-option>
  6.   </a-select>
  7. </template>
  8. <script>
  9. export default {
  10.   methods: {
  11.     handleChange(value) {
  12.       console.log(`selected ${value}`);
  13.     },
  14.   },
  15. };
  16. </script>

Select选择器 - 图12

多选

多选，从已有条目中选择（scroll the menu）

  1. <template>
  2.   <a-select
  3.     mode="multiple"
  4.     :default-value="['a1', 'b2']"
  5.     style="width: 100%"
  6.     placeholder="Please select"
  7.     @change="handleChange"
  8.   >
  9.     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  10.       {{ (i + 9).toString(36) + i }}
  11.     </a-select-option>
  12.   </a-select>
  13. </template>
  14. <script>
  15. export default {
  16.   methods: {
  17.     handleChange(value) {
  18.       console.log(`selected ${value}`);
  19.     },
  20.   },
  21. };
  22. </script>

Select选择器 - 图13

分组

用 OptGroup 进行选项分组。

  1. <template>
  2.   <a-select default-value="lucy" style="width: 200px" @change="handleChange">
  3.     <a-select-opt-group>
  4.       <span slot="label"><a-icon type="user" />Manager</span>
  5.       <a-select-option value="jack">
  6.         Jack
  7.       </a-select-option>
  8.       <a-select-option value="lucy">
  9.         Lucy
  10.       </a-select-option>
  11.     </a-select-opt-group>
  12.     <a-select-opt-group label="Engineer">
  13.       <a-select-option value="Yiminghe">
  14.         yiminghe
  15.       </a-select-option>
  16.     </a-select-opt-group>
  17.   </a-select>
  18. </template>
  19. <script>
  20. export default {
  21.   methods: {
  22.     handleChange(value) {
  23.       console.log(`selected ${value}`);
  24.     },
  25.   },
  26. };
  27. </script>

Select选择器 - 图14

带搜索框

展开后可对选项进行搜索。

  1. <template>
  2.   <a-select
  3.     show-search
  4.     placeholder="Select a person"
  5.     option-filter-prop="children"
  6.     style="width: 200px"
  7.     :filter-option="filterOption"
  8.     @focus="handleFocus"
  9.     @blur="handleBlur"
  10.     @change="handleChange"
  11.   >
  12.     <a-select-option value="jack">
  13.       Jack
  14.     </a-select-option>
  15.     <a-select-option value="lucy">
  16.       Lucy
  17.     </a-select-option>
  18.     <a-select-option value="tom">
  19.       Tom
  20.     </a-select-option>
  21.   </a-select>
  22. </template>
  23. <script>
  24. export default {
  25.   methods: {
  26.     handleChange(value) {
  27.       console.log(`selected ${value}`);
  28.     },
  29.     handleBlur() {
  30.       console.log('blur');
  31.     },
  32.     handleFocus() {
  33.       console.log('focus');
  34.     },
  35.     filterOption(input, option) {
  36.       return (
  37.         option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  38.       );
  39.     },
  40.   },
  41. };
  42. </script>

Select选择器 - 图15

后缀图标

基本使用。

  1. <template>
  2.   <div>
  3.     <a-select default-value="lucy" style="width: 120px" @change="handleChange">
  4.       <a-icon slot="suffixIcon" type="smile" />
  5.       <a-select-option value="jack">
  6.         Jack
  7.       </a-select-option>
  8.       <a-select-option value="lucy">
  9.         Lucy
  10.       </a-select-option>
  11.       <a-select-option value="disabled" disabled>
  12.         Disabled
  13.       </a-select-option>
  14.       <a-select-option value="Yiminghe">
  15.         yiminghe
  16.       </a-select-option>
  17.     </a-select>
  18.     <a-select default-value="lucy" style="width: 120px" disabled>
  19.       <a-icon slot="suffixIcon" type="meh" />
  20.       <a-select-option value="lucy">
  21.         Lucy
  22.       </a-select-option>
  23.     </a-select>
  24.   </div>
  25. </template>
  26. <script>
  27. export default {
  28.   methods: {
  29.     handleChange(value) {
  30.       console.log(`selected ${value}`);
  31.     },
  32.   },
  33. };
  34. </script>

Select选择器 - 图16

扩展菜单

使用 dropdownRender 对下拉菜单进行自由扩展。

  1. <template>
  2.   <a-select default-value="lucy" style="width: 120px">
  3.     <div slot="dropdownRender" slot-scope="menu">
  4.       <v-nodes :vnodes="menu" />
  5.       <a-divider style="margin: 4px 0;" />
  6.       <div
  7.         style="padding: 4px 8px; cursor: pointer;"
  8.         @mousedown="e => e.preventDefault()"
  9.         @click="addItem"
  10.       >
  11.         <a-icon type="plus" /> Add item
  12.       </div>
  13.     </div>
  14.     <a-select-option v-for="item in items" :key="item" :value="item">
  15.       {{ item }}
  16.     </a-select-option>
  17.   </a-select>
  18. </template>
  19. <script>
  20. let index = 0;
  21. export default {
  22.   components: {
  23.     VNodes: {
  24.       functional: true,
  25.       render: (h, ctx) => ctx.props.vnodes,
  26.     },
  27.   },
  28.   data: () => ({ items: ['jack', 'lucy'] }),
  29.   methods: {
  30.     addItem() {
  31.       console.log('addItem');
  32.       this.items.push(`New item ${index++}`);
  33.     },
  34.   },
  35. };
  36. </script>

API

  1. <a-select>
  2.   <a-select-option value="lucy">lucy</a-select-option>
  3. </a-select>

Select props

参数说明类型默认值
allowClear支持清除booleanfalse
autoClearSearchValue是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。booleantrue
autoFocus默认获取焦点booleanfalse
defaultActiveFirstOption是否默认高亮第一个选项。booleantrue
defaultValue指定默认选中的条目string|string[]|number|number[]-
disabled是否禁用booleanfalse
dropdownClassName下拉菜单的 className 属性string-
dropdownMatchSelectWidth下拉菜单和选择器同宽booleantrue
dropdownRender自定义下拉框内容(menuNode: VNode, props) => VNode-
dropdownStyle下拉菜单的 style 属性object-
dropdownMenuStyledropdown 菜单自定义样式object-
filterOption是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。boolean or function(inputValue, option)true
firstActiveValue默认高亮的选项string|string[]-
getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。Function(triggerNode)() => document.body
labelInValue是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 {key: string, label: vNodes} 的格式booleanfalse
maxTagCount最多显示多少个 tagnumber-
maxTagPlaceholder隐藏 tag 时显示的内容slot/function(omittedValues)-
maxTagTextLength最大显示的 tag 文本长度number-
mode设置 Select 的模式为多选或标签‘default’ | ‘multiple’ | ‘tags’ | ‘combobox’-
notFoundContent当下拉列表为空时显示的内容string|slot‘Not Found’
optionFilterProp搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索stringvalue
optionLabelProp回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 value。stringchildren （combobox 模式下为 value）
placeholder选择框默认文字string|slot-
showSearch使单选模式可搜索booleanfalse
showArrow是否显示下拉小箭头booleantrue
size选择框大小，可选 large smallstringdefault
suffixIcon自定义的选择框后缀图标VNode | slot-
removeIcon自定义的多选框清除图标VNode | slot-
clearIcon自定义的多选框清空图标VNode | slot-
menuItemSelectedIcon自定义当前选中的条目图标VNode | slot-
tokenSeparators在 tags 和 multiple 模式下自动分词的分隔符string[]
value(v-model)指定当前选中的条目string|string[]|number|number[]-
optionsoptions 数据，如果设置则不需要手动构造 selectOption 节点array<{value, label, [disabled, key, title]}>[]
defaultOpen是否默认展开下拉菜单boolean-
open是否展开下拉菜单boolean-

注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中。

事件

事件名称说明回调参数
blur失去焦点的时回调function
change选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数function(value, option:Option/Array<Option>)
deselect取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效function(value，option:Option)
focus获得焦点时回调function
inputKeydown键盘按下时回调function
mouseenter鼠标移入时回调function
mouseleave鼠标移出时回调function
popupScroll下拉列表滚动时的回调function
search文本框值变化时回调function(value: string)
select被选中时调用，参数为选中项的 value (或 key) 值function(value, option:Option)
dropdownVisibleChange展开下拉菜单的回调function(open)

Select Methods

名称说明
blur()取消焦点
focus()获取焦点

Option props

参数说明类型默认值
disabled是否禁用booleanfalse
key和 value 含义一致。如果 Vue 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置string
title选中该 Option 后，Select 的 titlestring-
value默认根据此属性值进行筛选string|number-
classOption 器类名string-

OptGroup props

参数说明类型默认值
keystring-
label组名string||function(h)|slot无

FAQ

点击 dropdownRender 里的内容浮层关闭怎么办？

看下 dropdownRender 例子 里的说明。