Select 选择器

下拉选择器。

何时使用

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

代码演示

Select选择器 - 图1

基本使用

基本使用。

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

Select选择器 - 图2

三种大小

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

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

Select选择器 - 图3

标签

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

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

Select选择器 - 图4

自动分词

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

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

Select选择器 - 图5

获得选项的文本

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

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

Select选择器 - 图6

多选

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

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

Select选择器 - 图7

联动

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

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

Select选择器 - 图8

分组

用 OptGroup 进行选项分组。

  1. <template>
  2.   <a-select defaultValue="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">Jack</a-select-option>
  6.       <a-select-option value="lucy">Lucy</a-select-option>
  7.     </a-select-opt-group>
  8.     <a-select-opt-group label="Engineer">
  9.       <a-select-option value="Yiminghe">yiminghe</a-select-option>
  10.     </a-select-opt-group>
  11.   </a-select>
  12. </template>
  13. <script>
  14. export default {
  15.   methods: {
  16.     handleChange(value) {
  17.       console.log(`selected ${value}`);
  18.     }
  19.   }
  20. }
  21. </script>

Select选择器 - 图9

搜索框

搜索和远程数据结合。

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

Select选择器 - 图10

带搜索框

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

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

Select选择器 - 图11

搜索用户

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

  1. <template>
  2.   <a-select
  3.     mode="multiple"
  4.     labelInValue
  5.     :value="value"
  6.     placeholder="Select users"
  7.     style="width: 100%"
  8.     :filterOption="false"
  9.     @search="fetchUser"
  10.     @change="handleChange"
  11.     :notFoundContent="fetching ? undefined : null"
  12.   >
  13.     <a-spin v-if="fetching" slot="notFoundContent" size="small"/>
  14.     <a-select-option v-for="d in data" :key="d.value">{{d.text}}</a-select-option>
  15.   </a-select>
  16. </template>
  17. <script>
  18. import jsonp from 'fetch-jsonp';
  19. import querystring from 'querystring';
  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) { // for fetch callback order
  43.             return;
  44.           }
  45.           const data = body.results.map(user => ({
  46.             text: `${user.name.first} ${user.name.last}`,
  47.             value: user.login.username,
  48.           }));
  49.           this.data = data
  50.           this.fetching = false
  51.         });
  52.     },
  53.     handleChange (value) {
  54.       Object.assign(this, {
  55.         value,
  56.         data: [],
  57.         fetching: false,
  58.       })
  59.     }
  60.   }
  61. }
  62. </script>

Select选择器 - 图12

后缀图标

基本使用。

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

Select选择器 - 图13

隐藏已选择选项

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

  1. <template>
  2.   <a-select
  3.     mode="multiple"
  4.     placeholder="Inserted are removed"
  5.     :value="selectedItems"
  6.     @change="handleChange"
  7.     style="width: 100%"
  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选择器 - 图14

扩展菜单

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

  1. <template>
  2.   <a-select defaultValue="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 style="padding: 8px; cursor: pointer;">
  7.         <a-icon type="plus" /> Add item
  8.       </div>
  9.     </div>
  10.     <a-select-option value="jack">Jack</a-select-option>
  11.     <a-select-option value="lucy">Lucy</a-select-option>
  12.   </a-select>
  13. </template>
  14. <script>
  15. export default {
  16.   data: ()=>({console: console}),
  17.   components: {
  18.     VNodes: {
  19.       functional: true,
  20.       render: (h, ctx) => ctx.props.vnodes
  21.     }
  22.   },
  23. }
  24. </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-
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)-
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无