• Select 选择器
    • 何时使用
    • 代码演示
      • 基本使用
      • 三种大小
      • 标签
      • 自动分词
      • 获得选项的文本
      • 多选
      • 联动
      • 分组
      • 搜索框
      • 带搜索框
      • 搜索用户
      • 后缀图标
      • 隐藏已选择选项
      • 扩展菜单
  • API
    • Select props
    • 事件
    • Select Methods
    • Option props
    • OptGroup props

    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 :size="size" defaultValue="a1" style="width: 200px" @change="handleChange">
    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.       :defaultValue="['a1', 'b2']"
    20.       style="width: 200px"
    21.       @change="handleChange"
    22.       @popupScroll="popupScroll"
    23.     >
    24.       <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
    25.         {{(i + 9).toString(36) + i}}
    26.       </a-select-option>
    27.     </a-select>
    28.     <br />
    29.     <a-select
    30.       mode="tags"
    31.       :size="size"
    32.       placeholder="Please select"
    33.       :defaultValue="['a1', 'b2']"
    34.       style="width: 200px"
    35.       @change="handleChange"
    36.     >
    37.       <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
    38.         {{(i + 9).toString(36) + i}}
    39.       </a-select-option>
    40.     </a-select>
    41.   </div>
    42. </template>
    43. <script>
    44.   export default {
    45.     data() {
    46.       return {
    47.         size: 'default',
    48.       };
    49.     },
    50.     methods: {
    51.       handleChange(value) {
    52.         console.log(`Selected: ${value}`);
    53.       },
    54.       popupScroll() {
    55.         console.log('popupScroll');
    56.       },
    57.     },
    58.   };
    59. </script>

    Select 选择器 - 图3

    标签

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

    1. <template>
    2.   <a-select mode="tags" style="width: 100%" @change="handleChange" placeholder="Tags Mode">
    3.     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i"
    4.       >{{(i + 9).toString(36) + i}}</a-select-option
    5.     >
    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

    自动分词

    试下复制 露西,杰克 到输入框里。只在 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"
    4.       >{{(i + 9).toString(36) + i}}</a-select-option
    5.     >
    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 选择器 - 图5

    获得选项的文本

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

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

    Select 选择器 - 图6

    多选

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

    1. <template>
    2.   <a-select
    3.     mode="multiple"
    4.     :defaultValue="['a1', 'b2']"
    5.     style="width: 100%"
    6.     @change="handleChange"
    7.     placeholder="Please select"
    8.   >
    9.     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i"
    10.       >{{(i + 9).toString(36) + i}}</a-select-option
    11.     >
    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 选择器 - 图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"
    5.         >{{province}}</a-select-option
    6.       >
    7.     </a-select>
    8.     <a-select v-model="secondCity" style="width: 120px">
    9.       <a-select-option v-for="city in cities" :key="city">{{city}}</a-select-option>
    10.     </a-select>
    11.   </div>
    12. </template>
    13. <script>
    14.   const provinceData = ['Zhejiang', 'Jiangsu'];
    15.   const cityData = {
    16.     Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
    17.     Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
    18.   };
    19.   export default {
    20.     data() {
    21.       return {
    22.         provinceData,
    23.         cityData,
    24.         cities: cityData[provinceData[0]],
    25.         secondCity: cityData[provinceData[0]][0],
    26.       };
    27.     },
    28.     methods: {
    29.       handleProvinceChange(value) {
    30.         this.cities = cityData[value];
    31.         this.secondCity = cityData[value][0];
    32.       },
    33.     },
    34.   };
    35. </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 (
    31.           option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    32.         );
    33.       },
    34.     },
    35.   };
    36. </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) {
    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 选择器 - 图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

    隐藏已选择选项

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

    <template>
  <a-select
    mode="multiple"
    placeholder="Inserted are removed"
    :value="selectedItems"
    @change="handleChange"
    style="width: 100%"
  >
    <a-select-option v-for="item in filteredOptions" :key="item" :value="item">
      {{item}}
    </a-select-option>
  </a-select>
</template>
<script>
  const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
  export default {
    data() {
      return {
        selectedItems: [],
      };
    },
    computed: {
      filteredOptions() {
        return OPTIONS.filter(o => !this.selectedItems.includes(o));
      },
    },
    methods: {
      handleChange(selectedItems) {
        this.selectedItems = selectedItems;
      },
    },
  };
</script>

    Select 选择器 - 图14

    扩展菜单

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

    <template>
  <a-select defaultValue="lucy" style="width: 120px">
    <div slot="dropdownRender" slot-scope="menu">
      <v-nodes :vnodes="menu" />
      <a-divider style="margin: 4px 0;" />
      <div style="padding: 8px; cursor: pointer;"><a-icon type="plus" /> Add item</div>
    </div>
    <a-select-option value="jack">Jack</a-select-option>
    <a-select-option value="lucy">Lucy</a-select-option>
  </a-select>
</template>
<script>
  export default {
    data: () => ({ console: console }),
    components: {
      VNodes: {
        functional: true,
        render: (h, ctx) => ctx.props.vnodes,
      },
    },
  };
</script>

    API

    <a-select>
  <a-select-option value="lucy">lucy</a-select-option>
</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)-
    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无