Select选择器 - 图1

Select 选择器

下拉选择器。

何时使用

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

代码演示

Select选择器 - 图2

Select选择器 - 图3

Select选择器 - 图4

基本使用

基本使用。

  1. <template>
  2.   <a-select
  3.     v-model:value="value1"
  4.     style="width: 120px"
  5.     @focus="focus"
  6.     ref="select"
  7.     @change="handleChange"
  8.   >
  9.     <a-select-option value="jack">Jack</a-select-option>
  10.     <a-select-option value="lucy">Lucy</a-select-option>
  11.     <a-select-option value="disabled" disabled>Disabled</a-select-option>
  12.     <a-select-option value="Yiminghe">yiminghe</a-select-option>
  13.   </a-select>
  14.   <a-select v-model:value="value2" style="width: 120px" disabled>
  15.     <a-select-option value="lucy">Lucy</a-select-option>
  16.   </a-select>
  17.   <a-select v-model:value="value3" style="width: 120px" loading>
  18.     <a-select-option value="lucy">Lucy</a-select-option>
  19.   </a-select>
  20. </template>
  21. <script lang="ts">
  22. import { defineComponent, ref } from 'vue';
  23. export default defineComponent({
  24.   setup() {
  25.     const focus = () => {
  26.       console.log('focus');
  27.     };
  29.     const handleChange = (value: string) => {
  30.       console.log(`selected ${value}`);
  31.     };
  33.     return {
  34.       focus,
  35.       handleChange,
  36.       value1: ref('lucy'),
  37.       value2: ref('lucy'),
  38.       value3: ref('lucy'),
  39.     };
  40.   },
  41. });
  42. </script>

Select选择器 - 图5

标签

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

  1. <template>
  2.   <a-select
  3.     v-model:value="value"
  4.     mode="tags"
  5.     style="width: 100%"
  6.     placeholder="Tags Mode"
  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 lang="ts">
  15. import { defineComponent, ref } from 'vue';
  16. export default defineComponent({
  17.   setup() {
  18.     const handleChange = (value: string) => {
  19.       console.log(`selected ${value}`);
  20.     };
  21.     return {
  22.       value: ref([]),
  23.       handleChange,
  24.     };
  25.   },
  26. });
  27. </script>

Select选择器 - 图6

获得选项的文本

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

  1. <template>
  2.   <a-select label-in-value v-model:value="value" 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 lang="ts">
  8. import { defineComponent, ref } from 'vue';
  10. interface Value {
  11.   key?: string;
  12.   label?: string;
  13. }
  15. export default defineComponent({
  16.   setup() {
  17.     const handleChange = (value: Value) => {
  18.       console.log(value); // { key: "lucy", label: "Lucy (101)" }
  19.     };
  20.     return {
  21.       value: ref<Value>({ key: 'lucy' }),
  22.       handleChange,
  23.     };
  24.   },
  25. });
  26. </script>

Select选择器 - 图7

Select选择器 - 图8

联动

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

  1. <template>
  2.   <a-select v-model:value="province" style="width: 120px">
  3.     <a-select-option v-for="pro in provinceData" :key="pro">
  4.       {{ pro }}
  5.     </a-select-option>
  6.   </a-select>
  7.   <a-select v-model:value="secondCity" style="width: 120px">
  8.     <a-select-option v-for="city in cities" :key="city">
  9.       {{ city }}
  10.     </a-select-option>
  11.   </a-select>
  12. </template>
  13. <script lang="ts">
  14. const provinceData = ['Zhejiang', 'Jiangsu'];
  15. const cityData: Record<string, string[]> = {
  16.   Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  17.   Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
  18. };
  19. import { defineComponent, reactive, toRefs, computed, watch } from 'vue';
  20. export default defineComponent({
  21.   setup() {
  22.     const province = provinceData[0];
  23.     const state = reactive({
  24.       province,
  25.       provinceData,
  26.       cityData,
  27.       secondCity: cityData[province][0],
  28.     });
  29.     const cities = computed(() => {
  30.       return cityData[state.province];
  31.     });
  33.     watch(
  34.       () => state.province,
  35.       val => {
  36.         state.secondCity = state.cityData[val][0];
  37.       },
  38.     );
  40.     return {
  41.       ...toRefs(state),
  42.       cities,
  43.     };
  44.   },
  45. });
  46. </script>

Select选择器 - 图9

搜索框

搜索和远程数据结合。

  1. <template>
  2.   <a-select
  3.     show-search
  4.     v-model: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 lang="ts">
  20. import jsonp from 'fetch-jsonp';
  21. import querystring from 'querystring';
  22. import { defineComponent, ref } from 'vue';
  24. let timeout: any;
  25. let currentValue = '';
  27. function fetch(value: string, callback: any) {
  28.   if (timeout) {
  29.     clearTimeout(timeout);
  30.     timeout = null;
  31.   }
  32.   currentValue = value;
  34.   function fake() {
  35.     const str = querystring.encode({
  36.       code: 'utf-8',
  37.       q: value,
  38.     });
  39.     jsonp(`https://suggest.taobao.com/sug?${str}`)
  40.       .then(response => response.json())
  41.       .then(d => {
  42.         if (currentValue === value) {
  43.           const result = d.result;
  44.           const data: any[] = [];
  45.           result.forEach((r: any) => {
  46.             data.push({
  47.               value: r[0],
  48.               text: r[0],
  49.             });
  50.           });
  51.           callback(data);
  52.         }
  53.       });
  54.   }
  56.   timeout = setTimeout(fake, 300);
  57. }
  59. export default defineComponent({
  60.   setup() {
  61.     const data = ref<any[]>([]);
  62.     const value = ref();
  64.     const handleSearch = (val: string) => {
  65.       fetch(val, (d: any[]) => (data.value = d));
  66.     };
  67.     const handleChange = (val: string) => {
  68.       console.log(val);
  69.       value.value = val;
  70.       fetch(val, (d: any[]) => (data.value = d));
  71.     };
  72.     return {
  73.       handleSearch,
  74.       handleChange,
  75.       data,
  76.       value,
  77.     };
  78.   },
  79. });
  80. </script>

Select选择器 - 图10

搜索用户

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

  1. <template>
  2.   <a-select
  3.     mode="multiple"
  4.     label-in-value
  5.     v-model: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.   >
  12.     <template v-if="fetching" #notFoundContent>
  13.       <a-spin size="small" />
  14.     </template>
  15.     <a-select-option v-for="d in data" :key="d.value">
  16.       {{ d.text }}
  17.     </a-select-option>
  18.   </a-select>
  19. </template>
  20. <script>
  21. import { defineComponent, reactive, toRefs, watch } from 'vue';
  22. import { debounce } from 'lodash-es';
  24. export default defineComponent({
  25.   setup() {
  26.     let lastFetchId = 0;
  28.     const state = reactive({
  29.       data: [],
  30.       value: [],
  31.       fetching: false,
  32.     });
  34.     const fetchUser = debounce(value => {
  35.       console.log('fetching user', value);
  36.       lastFetchId += 1;
  37.       const fetchId = lastFetchId;
  38.       state.data = [];
  39.       state.fetching = true;
  40.       fetch('https://randomuser.me/api/?results=5')
  41.         .then(response => response.json())
  42.         .then(body => {
  43.           if (fetchId !== lastFetchId) {
  44.             // for fetch callback order
  45.             return;
  46.           }
  47.           const data = body.results.map(user => ({
  48.             text: `${user.name.first} ${user.name.last}`,
  49.             value: user.login.username,
  50.           }));
  51.           state.data = data;
  52.           state.fetching = false;
  53.         });
  54.     }, 800);
  56.     watch(state.value, () => {
  57.       state.data = [];
  58.       state.fetching = false;
  59.     });
  61.     return {
  62.       ...toRefs(state),
  63.       fetchUser,
  64.     };
  65.   },
  66. });
  67. </script>

Select选择器 - 图11

隐藏已选择选项

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

  1. <template>
  2.   <a-select
  3.     mode="multiple"
  4.     placeholder="Inserted are removed"
  5.     v-model:value="selectedItems"
  6.     style="width: 100%"
  7.   >
  8.     <a-select-option v-for="item in filteredOptions" :key="item" :value="item">
  9.       {{ item }}
  10.     </a-select-option>
  11.   </a-select>
  12. </template>
  13. <script lang="ts">
  14. import { computed, defineComponent, ref } from 'vue';
  16. const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
  17. export default defineComponent({
  18.   setup() {
  19.     const selectedItems = ref<string[]>([]);
  21.     const filteredOptions = computed(() => OPTIONS.filter(o => !selectedItems.value.includes(o)));
  23.     return {
  24.       selectedItems,
  25.       filteredOptions,
  26.     };
  27.   },
  28. });
  29. </script>

Select选择器 - 图12

定制回填内容

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

  1. <template>
  2.   <a-select
  3.     v-model:value="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">🇨🇳</span>
  11.       China (中国)
  12.     </a-select-option>
  13.     <a-select-option value="usa" label="USA">
  14.       <span role="img" aria-label="USA">🇺🇸</span>
  15.       USA (美国)
  16.     </a-select-option>
  17.     <a-select-option value="japan" label="Japan">
  18.       <span role="img" aria-label="Japan">🇯🇵</span>
  19.       Japan (日本)
  20.     </a-select-option>
  21.     <a-select-option value="korea" label="Korea">
  22.       <span role="img" aria-label="Korea">🇰🇷</span>
  23.       Korea (韩国)
  24.     </a-select-option>
  25.   </a-select>
  26. </template>
  27. <script lang="ts">
  28. import { defineComponent, ref, watch } from 'vue';
  30. export default defineComponent({
  31.   setup() {
  32.     const value = ref(['china']);
  34.     watch(value, val => {
  35.       console.log(`selected:`, val);
  36.     });
  38.     return {
  39.       value,
  40.     };
  41.   },
  42. });
  43. </script>

Select选择器 - 图13

Select选择器 - 图14

Select选择器 - 图15

Select选择器 - 图16

三种大小

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

  1. <template>
  2.   <a-radio-group v-model:value="size">
  3.     <a-radio-button value="large">Large</a-radio-button>
  4.     <a-radio-button value="default">Default</a-radio-button>
  5.     <a-radio-button value="small">Small</a-radio-button>
  6.   </a-radio-group>
  7.   <br />
  8.   <br />
  9.   <a-select :size="size" v-model:value="value1" style="width: 200px">
  10.     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  11.       {{ (i + 9).toString(36) + i }}
  12.     </a-select-option>
  13.   </a-select>
  14.   <br />
  15.   <a-select
  16.     mode="multiple"
  17.     :size="size"
  18.     placeholder="Please select"
  19.     v-model:value="value2"
  20.     style="width: 200px"
  21.     @popupScroll="popupScroll"
  22.   >
  23.     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  24.       {{ (i + 9).toString(36) + i }}
  25.     </a-select-option>
  26.   </a-select>
  27.   <br />
  28.   <a-select
  29.     mode="tags"
  30.     :size="size"
  31.     placeholder="Please select"
  32.     v-model:value="value3"
  33.     style="width: 200px"
  34.   >
  35.     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  36.       {{ (i + 9).toString(36) + i }}
  37.     </a-select-option>
  38.   </a-select>
  39. </template>
  40. <script lang="ts">
  41. import { defineComponent, ref } from 'vue';
  42. export default defineComponent({
  43.   setup() {
  44.     const popupScroll = () => {
  45.       console.log('popupScroll');
  46.     };
  48.     return {
  49.       popupScroll,
  50.       size: ref('default'),
  51.       value1: ref('a1'),
  52.       value2: ref(['a1', 'b2']),
  53.       value3: ref(['a1', 'b2']),
  54.     };
  55.   },
  56. });
  57. </script>

Select选择器 - 图17

自动分词

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

  1. <template>
  2.   <a-select
  3.     v-model:value="value"
  4.     mode="tags"
  5.     style="width: 100%"
  6.     :token-separators="[',']"
  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 lang="ts">
  15. import { defineComponent, ref } from 'vue';
  16. export default defineComponent({
  17.   setup() {
  18.     const handleChange = (value: string) => {
  19.       console.log(`selected ${value}`);
  20.     };
  22.     return {
  23.       handleChange,
  24.       value: ref<string[]>([]),
  25.     };
  26.   },
  27. });
  28. </script>

Select选择器 - 图18

多选

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

  1. <template>
  2.   <a-select
  3.     mode="multiple"
  4.     v-model:value="value"
  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 lang="ts">
  15. import { defineComponent, ref } from 'vue';
  16. export default defineComponent({
  17.   setup() {
  18.     const handleChange = (value: string[]) => {
  19.       console.log(`selected ${value}`);
  20.     };
  21.     return {
  22.       handleChange,
  23.       value: ref(['a1', 'b2']),
  24.     };
  25.   },
  26. });
  27. </script>

Select选择器 - 图19

分组

用 OptGroup 进行选项分组。

  1. <template>
  2.   <a-select v-model:value="value" style="width: 200px" @change="handleChange">
  3.     <a-select-opt-group>
  4.       <template #label>
  5.         <span>
  6.           <user-outlined />
  7.           Manager
  8.         </span>
  9.       </template>
  10.       <a-select-option value="jack">Jack</a-select-option>
  11.       <a-select-option value="lucy">Lucy</a-select-option>
  12.     </a-select-opt-group>
  13.     <a-select-opt-group label="Engineer">
  14.       <a-select-option value="Yiminghe">yiminghe</a-select-option>
  15.       <a-select-option value="Yiminghe1">yiminghe1</a-select-option>
  16.     </a-select-opt-group>
  17.   </a-select>
  18. </template>
  19. <script lang="ts">
  20. import { defineComponent, ref } from 'vue';
  21. import { UserOutlined } from '@ant-design/icons-vue';
  22. export default defineComponent({
  23.   setup() {
  24.     const handleChange = (value: string) => {
  25.       console.log(`selected ${value}`);
  26.     };
  28.     return {
  29.       value: ref(['lucy']),
  30.       handleChange,
  31.     };
  32.   },
  33.   components: {
  34.     UserOutlined,
  35.   },
  36. });
  37. </script>

Select选择器 - 图20

带搜索框

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

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

Select选择器 - 图21

Select选择器 - 图22

后缀图标

基本使用。

  1. <template>
  2.   <a-select v-model:value="value1" style="width: 120px" @change="handleChange">
  3.     <template #suffixIcon><smile-outlined /></template>
  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 v-model:value="value2" style="width: 120px" disabled>
  10.     <template #suffixIcon><meh-outlined /></template>
  11.     <a-select-option value="lucy">Lucy</a-select-option>
  12.   </a-select>
  13. </template>
  14. <script lang="ts">
  15. import { SmileOutlined, MehOutlined } from '@ant-design/icons-vue';
  16. import { defineComponent, ref } from 'vue';
  18. export default defineComponent({
  19.   setup() {
  20.     const handleChange = (value: string) => {
  21.       console.log(`selected ${value}`);
  22.     };
  24.     return {
  25.       handleChange,
  26.       value1: ref('lucy'),
  27.       value2: ref('lucy'),
  28.     };
  29.   },
  30.   components: {
  31.     SmileOutlined,
  32.     MehOutlined,
  33.   },
  34. });
  35. </script>

Select选择器 - 图23

扩展菜单

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

  1. <template>
  2.   <a-select v-model:value="value" style="width: 120px">
  3.     <template #dropdownRender="{ menuNode: 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.         <plus-outlined />
  12.         Add item
  13.       </div>
  14.     </template>
  15.     <a-select-option v-for="item in items" :key="item" :value="item">
  16.       {{ item }}
  17.     </a-select-option>
  18.   </a-select>
  19. </template>
  20. <script lang="ts">
  21. import { PlusOutlined } from '@ant-design/icons-vue';
  22. import { defineComponent, ref } from 'vue';
  24. let index = 0;
  25. export default defineComponent({
  26.   setup() {
  27.     const items = ref(['jack', 'lucy']);
  28.     const value = ref('lucy');
  30.     const addItem = () => {
  31.       console.log('addItem');
  32.       items.value.push(`New item ${index++}`);
  33.     };
  34.     return {
  35.       items,
  36.       value,
  37.       addItem,
  38.     };
  39.   },
  40.   components: {
  41.     PlusOutlined,
  42.     VNodes: (_, { attrs }) => {
  43.       return attrs.vnodes;
  44.     },
  45.   },
  46. });
  47. </script>

10000 Items

Select选择器 - 图24

大数据

Select 使用了虚拟滚动技术，因而获得了比 1.x 更好的性能

  1. <template>
  2.   <h2>{{ options.length }} Items</h2>
  3.   <a-select
  4.     v-model:value="value"
  5.     mode="multiple"
  6.     style="width: 100%"
  7.     placeholder="Please select"
  8.     :options="options"
  9.   />
  10. </template>
  11. <script lang="ts">
  12. import { defineComponent, reactive } from 'vue';
  13. const options: { value: string; disabled: boolean }[] = [];
  14. for (let i = 0; i < 10000; i++) {
  15.   const value = `${i.toString(36)}${i}`;
  16.   options.push({
  17.     value,
  18.     disabled: i === 10,
  19.   });
  20. }
  21. export default defineComponent({
  22.   setup() {
  23.     const state = reactive({
  24.       options,
  25.       value: ['a10', 'c12'],
  26.     });
  27.     return state;
  28.   },
  29. });
  30. </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
disabled是否禁用booleanfalse
dropdownClassName下拉菜单的 className 属性string-
dropdownMatchSelectWidth下拉菜单和选择器同宽booleantrue
dropdownRender自定义下拉框内容({menuNode: VNode, props}) => VNode | v-slot-
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 属性，不支持 childrenstringvalue
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 例子 里的说明。