Select 选择器

下拉选择器。

何时使用

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

代码演示

基本使用

基本使用。

<template>
  <div>
    <a-select defaultValue="lucy" style="width: 120px" @change="handleChange">
      <a-select-option value="jack">Jack</a-select-option>
      <a-select-option value="lucy">Lucy</a-select-option>
      <a-select-option value="disabled" disabled>Disabled</a-select-option>
      <a-select-option value="Yiminghe">yiminghe</a-select-option>
    </a-select>
    <a-select defaultValue="lucy" style='width: 120px' disabled>
      <a-select-option value="lucy">Lucy</a-select-option>
    </a-select>
    <a-select defaultValue="lucy" style='width: 120px' loading>
      <a-select-option value="lucy">Lucy</a-select-option>
    </a-select>
  </div>
</template>
<script>
export default {
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    }
  }
}
</script>

三种大小

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

<template>
  <div>
    <a-radio-group v-model="size">
      <a-radio-button value="large">Large</a-radio-button>
      <a-radio-button value="default">Default</a-radio-button>
      <a-radio-button value="small">Small</a-radio-button>
    </a-radio-group>
    <br /><br />
    <a-select
      :size="size"
      defaultValue="a1"
      style="width: 200px"
      @change="handleChange"
    >
      <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{(i + 9).toString(36) + i}}
      </a-select-option>
    </a-select>
    <br />
    <a-select
      mode="multiple"
      :size="size"
      placeholder="Please select"
      :defaultValue="['a1', 'b2']"
      style="width: 200px"
      @change="handleChange"
      @popupScroll="popupScroll"
    >
      <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{(i + 9).toString(36) + i}}
      </a-select-option>
    </a-select>
    <br />
    <a-select
      mode="tags"
      :size="size"
      placeholder="Please select"
      :defaultValue="['a1', 'b2']"
      style="width: 200px"
      @change="handleChange"
    >
      <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{(i + 9).toString(36) + i}}
      </a-select-option>
    </a-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      size: 'default',
    }
  },
  methods: {
    handleChange(value) {
      console.log(`Selected: ${value}`);
    },
    popupScroll(){
      console.log('popupScroll')
    }
  }
}
</script>

标签

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

<template>
  <a-select
    mode="tags"
    style="width: 100%"
    @change="handleChange"
    placeholder="Tags Mode"
  >
    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">{{(i + 9).toString(36) + i}}</a-select-option>
  </a-select>
</template>
<script>
export default {
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    },
  }
}
</script>

自动分词

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

<template>
  <a-select mode="tags" style="width: 100%" :tokenSeparators="[',']" @change="handleChange">
    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">{{(i + 9).toString(36) + i}}</a-select-option>
  </a-select>
</template>
<script>
export default {
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    }
  }
}
</script>

获得选项的文本

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

<template>
  <a-select labelInValue :defaultValue="{ key: 'lucy' }" style="width: 120px" @change="handleChange">
    <a-select-option value="jack">Jack (100)</a-select-option>
    <a-select-option value="lucy">Lucy (101)</a-select-option>
  </a-select>
</template>
<script>
export default {
  methods: {
    handleChange(value) {
      console.log(value); // { key: "lucy", label: "Lucy (101)" }
    }
  }
}
</script>

多选

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

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

联动

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

<template>
  <div>
    <a-select :defaultValue="provinceData[0]" style="width: 120px" @change="handleProvinceChange">
      <a-select-option v-for="province in provinceData" :key="province">{{province}}</a-select-option>
    </a-select>
    <a-select v-model="secondCity" style="width: 120px">
      <a-select-option v-for="city in cities" :key="city">{{city}}</a-select-option>
    </a-select>
  </div>
</template>
<script>
const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};
export default {
  data() {
    return {
      provinceData,
      cityData,
      cities: cityData[provinceData[0]],
      secondCity: cityData[provinceData[0]][0],
    }
  },
  methods: {
    handleProvinceChange(value) {
      this.cities = cityData[value]
      this.secondCity = cityData[value][0]
    }
  }
}
</script>

分组

用 OptGroup 进行选项分组。

<template>
  <a-select defaultValue="lucy" style="width: 200px" @change="handleChange">
    <a-select-opt-group>
      <span slot="label"><a-icon type="user"/>Manager</span>
      <a-select-option value="jack">Jack</a-select-option>
      <a-select-option value="lucy">Lucy</a-select-option>
    </a-select-opt-group>
    <a-select-opt-group label="Engineer">
      <a-select-option value="Yiminghe">yiminghe</a-select-option>
    </a-select-opt-group>
  </a-select>
</template>
<script>
export default {
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    }
  }
}
</script>

搜索框

搜索和远程数据结合。

<template>
  <a-select
    showSearch
    :value="value"
    placeholder="input search text"
    style="width: 200px"
    :defaultActiveFirstOption="false"
    :showArrow="false"
    :filterOption="false"
    @search="handleSearch"
    @change="handleChange"
    :notFoundContent="null"
  >
    <a-select-option v-for="d in data" :key="d.value">{{d.text}}</a-select-option>
  </a-select>
</template>
<script>
import jsonp from 'fetch-jsonp';
import querystring from 'querystring';
let timeout;
let currentValue;
function fetch(value, callback) {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  currentValue = value;
  function fake() {
    const str = querystring.encode({
      code: 'utf-8',
      q: value,
    });
    jsonp(`https://suggest.taobao.com/sug?${str}`)
      .then(response => response.json())
      .then((d) => {
        if (currentValue === value) {
          const result = d.result;
          const data = [];
          result.forEach((r) => {
            data.push({
              value: r[0],
              text: r[0],
            });
          });
          callback(data);
        }
      });
  }
  timeout = setTimeout(fake, 300);
}
export default {
  data() {
    return {
      data: [],
      value: undefined,
    }
  },
  methods: {
    handleSearch (value) {
      fetch(value, data => this.data = data);
    },
    handleChange (value) {
      console.log(value)
      this.value = value
      fetch(value, data => this.data = data);
    },
  }
}
</script>

带搜索框

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

<template>
  <a-select
    showSearch
    placeholder="Select a person"
    optionFilterProp="children"
    style="width: 200px"
    @focus="handleFocus"
    @blur="handleBlur"
    @change="handleChange"
    :filterOption="filterOption"
  >
    <a-select-option value="jack">Jack</a-select-option>
    <a-select-option value="lucy">Lucy</a-select-option>
    <a-select-option value="tom">Tom</a-select-option>
  </a-select>
</template>
<script>
export default {
  methods: {
    handleChange (value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  }
}
</script>

搜索用户

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

<template>
  <a-select
    mode="multiple"
    labelInValue
    :value="value"
    placeholder="Select users"
    style="width: 100%"
    :filterOption="false"
    @search="fetchUser"
    @change="handleChange"
    :notFoundContent="fetching ? undefined : null"
  >
    <a-spin v-if="fetching" slot="notFoundContent" size="small"/>
    <a-select-option v-for="d in data" :key="d.value">{{d.text}}</a-select-option>
  </a-select>
</template>
<script>
import jsonp from 'fetch-jsonp';
import querystring from 'querystring';
import debounce from 'lodash/debounce';
export default {
  data() {
    this.lastFetchId = 0;
    this.fetchUser = debounce(this.fetchUser, 800);
    return {
      data: [],
      value: [],
      fetching: false,
    }
  },
  methods: {
    fetchUser (value) {
      console.log('fetching user', value);
      this.lastFetchId += 1;
      const fetchId = this.lastFetchId;
      this.data = []
      this.fetching = true
      fetch('https://randomuser.me/api/?results=5')
        .then(response => response.json())
        .then((body) => {
          if (fetchId !== this.lastFetchId) { // for fetch callback order
            return;
          }
          const data = body.results.map(user => ({
            text: `${user.name.first} ${user.name.last}`,
            value: user.login.username,
          }));
          this.data = data
          this.fetching = false
        });
    },
    handleChange (value) {
      Object.assign(this, {
        value,
        data: [],
        fetching: false,
      })
    }
  }
}
</script>

后缀图标

基本使用。

<template>
  <div>
    <a-select defaultValue="lucy" style="width: 120px" @change="handleChange">
      <a-icon slot="suffixIcon" type="smile" />
      <a-select-option value="jack">Jack</a-select-option>
      <a-select-option value="lucy">Lucy</a-select-option>
      <a-select-option value="disabled" disabled>Disabled</a-select-option>
      <a-select-option value="Yiminghe">yiminghe</a-select-option>
    </a-select>
    <a-select defaultValue="lucy" style='width: 120px' disabled>
      <a-icon slot="suffixIcon" type="meh" />
      <a-select-option value="lucy">Lucy</a-select-option>
    </a-select>
  </div>
</template>
<script>
export default {
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    }
  }
}
</script>

隐藏已选择选项

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

<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>

扩展菜单

使用 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

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

事件

Select Methods

Option props

OptGroup props