Select 选择器

基础用法

基本用法，可添加 disabled 属性禁用选择器

<at-select v-model="model1" style="width:100px">
  <at-option value="1">深圳</at-option>
  <at-option value="2">广州广州广州广州广州广州广州广州广州广州</at-option>
  <at-option value="3">上海</at-option>
  <at-option value="4">北京</at-option>
  <at-option value="5">成都</at-option>
</at-select>
<at-select v-model="model2" style="width:100px">
  <at-option value="1">深圳</at-option>
  <at-option value="2">广州</at-option>
</at-select>
<at-select v-model="model2" disabled style="width:100px">
  <at-option value="1">深圳</at-option>
  <at-option value="2">广州</at-option>
</at-select>

不同尺寸

可设置 size 属性控制选择器大小，提供三种尺寸：large，normal，small

<at-select v-model="model3" size="small" style="width: 100px">
  <at-option value="1">深圳</at-option>
  <at-option value="2">广州</at-option>
  <at-option value="3">上海</at-option>
  <at-option value="4">北京</at-option>
  <at-option value="5">成都</at-option>
</at-select>
<at-select v-model="model3" size="normal" style="width: 100px">
  <at-option value="1">深圳</at-option>
  <at-option value="2">广州</at-option>
  <at-option value="3">上海</at-option>
  <at-option value="4">北京</at-option>
  <at-option value="5">成都</at-option>
</at-select>
<at-select v-model="model3" size="large" style="width: 100px">
  <at-option value="1">深圳</at-option>
  <at-option value="2">广州</at-option>
  <at-option value="3">上海</at-option>
  <at-option value="4">北京</at-option>
  <at-option value="5">成都</at-option>
</at-select>

可清空选择

设置 clearable 属性可清空已选项，仅适用于单选选择器

<at-select v-model="model4" clearable size="large" style="width: 100px">
  <at-option value="1">深圳</at-option>
  <at-option value="2">广州</at-option>
  <at-option value="3">上海</at-option>
  <at-option value="4">北京</at-option>
  <at-option value="5">成都</at-option>
</at-select>

分组选项

选项可通过使用 AtOptionGroup 组件进行分组，分组的名称可使用属性 label 设置

<at-select v-model="model5" style="width: 100px">
  <at-option-group label="广东省">
    <at-option value="1">深圳</at-option>
    <at-option value="2">广州</at-option>
    <at-option value="3">珠海</at-option>
  </at-option-group>
  <at-option-group label="其他">
    <at-option value="4">上海</at-option>
    <at-option value="5">北京</at-option>
    <at-option value="6" disabled>成都</at-option>
    <at-option value="7">昆明</at-option>
    <at-option value="8">杭州</at-option>
  </at-option-group>
</at-select>

自定义模板

可自定义 AtOption 显示的内容，但是请给 AtOption 添加 label 属性，这可以让选择器优先显示选项的 label 值，而不是内容本身

<at-select v-model="model6" style="width: 140px">
  <at-option value="1" label="深圳"><span>深圳</span><span style="float: right;opacity: .6;font-size: 0.8em;">Shenzhen</span></at-option>
  <at-option value="2" label="广州"><span>广州</span><span style="float: right;opacity: .6;font-size: 0.8em;">Guangzhou</span></at-option>
  <at-option value="3" label="上海"><span>上海</span><span style="float: right;opacity: .6;font-size: 0.8em;">Shanghai</span></at-option>
  <at-option value="4" label="北京"><span>北京</span><span style="float: right;opacity: .6;font-size: 0.8em;">Beijin</span></at-option>
  <at-option value="5" label="成都"><span>成都</span><span style="float: right;opacity: .6;font-size: 0.8em;">Chengdu</span></at-option>
</at-select>

多选列表

设置 multiple 属性可开启多项选择器，此时绑定的 model 将接受数组类型的数据

<at-select v-model="model7" multiple style="width: 240px">
  <at-option value="1">深圳</at-option>
  <at-option value="2">广州</at-option>
  <at-option value="3">上海</at-option>
  <at-option value="4">北京</at-option>
  <at-option value="5">成都</at-option>
</at-select>

可搜索列表

添加 filterable 属性开启选择列表的可搜索功能

<at-select v-model="model8" filterable size="large" style="width: 240px">
  <at-option value="1">深圳</at-option>
  <at-option value="2">广州</at-option>
  <at-option value="3">上海</at-option>
  <at-option value="4">北京</at-option>
  <at-option value="5">成都</at-option>
  <at-option value="6">厦门</at-option>
  <at-option value="7">昆明</at-option>
  <at-option value="8">杭州</at-option>
</at-select>

Select 参数

Select 事件