Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

基础用法

适用广泛的基础单选

el-option 的属性 label和value是必填的。

<!--你可以通过 model 来获取每次选择的值-->
<!--或者通过绑定 (modelChange)=handle 来获得每次值改变的触发-->
<el-select [model]="value" placeholder="请选择" (modelChange)="handle($event)">
  <el-option *ngFor="let item of foods"
    [label]="item.label"
    [value]="item.value">
  </el-option>
</el-select>
<el-button (click)="clear()">clear</el-button>
<script type="text">
// in component
handle(event: any):void {
  this.value = event
  console.log(event, this.value)
}
clear(): void {
  this.value = null
}
</script>

有禁用选项

在el-option中，设定 elDisabled值为 true，即可禁用该选项。

<el-select [(model)]="value" placeholder="请选择">
  <el-option *ngFor="let item of [{value: '选项1',label: '黄金糕' },
    { value: '选项2', label: '双皮奶' },
    { elDisabled: true, value: '选项3', label: '蚵仔煎' },
    { value: '选项4', label: '龙须面' },
    { value: '选项5', label: '北京烤鸭' }]"
    [label]="item.label"
    [elDisabled]="item.elDisabled"
    [value]="item.value">
  </el-option>
</el-select>

禁用状态

选择器不可用状态

在el-option中，设定 elDisabled值为 true，即可禁用该选项。

<el-select [model]="'选项2'" [elDisabled]="true">
  <el-option *ngFor="let item of [{value: '选项1',label: '黄金糕' }]"
    [label]="item.label"
    [value]="item.value">
  </el-option>
</el-select>

默认选中

初始状态时默认选中值

在el-select中，设定 model 初始值等于需要选中项的 value 即可。

<el-select [model]="'选项2'">
  <el-option *ngFor="let item of [{value: '选项1',label: '黄金糕' },
    { value: '选项2', label: '双皮奶' },
    { elDisabled: true, value: '选项3', label: '蚵仔煎' },
    { value: '选项4', label: '龙须面' },
    { value: '选项5', label: '北京烤鸭' }]"
    [label]="item.label"
    [value]="item.value">
  </el-option>
</el-select>

可清空单选

包含清空按钮，可将选择器清空为初始状态

在el-select中，设定 clearable值为 true，则可将选择器清空。

<el-select [(model)]="value" [clearable]="true">
  <el-option *ngFor="let item of [{value: '选项1',label: '黄金糕' },
    { value: '选项2', label: '双皮奶' },
    { elDisabled: true, value: '选项3', label: '蚵仔煎' },
    { value: '选项4', label: '龙须面' },
    { value: '选项5', label: '北京烤鸭' }]"
    [label]="item.label"
    [value]="item.value">
  </el-option>
</el-select>

多选

开启多选时，清空按钮是不可用的

<el-select [model]="value" (modelChange)="handle($event)" [clearable]="true" [multiple]="true" size="large">
  <el-option *ngFor="let item of [{value: 'hello',label: 'hello' },
    { value: 'ruby', label: 'ruby' },
    { elDisabled: true, value: 'scala', label: 'scala' },
    { value: 'javascript', label: 'javascript' },
    { value: 'java', label: 'java' }]"
    [label]="item.label"
    [value]="item.value">
  </el-option>
</el-select>

Select Attributes

Select-option Attributes