Element el-select 选择器(下拉框)详解

点此查看全部文字教程、视频教程、源代码

1. 用途

el-select即选择器，用于从若干个候选项中选择其中一个(或者多个)。

在传统网页开发中，选择器经常被称作下拉框、下拉列表，是最常用的表单元素之一。

2. 数据绑定

el-select的数据可以来源于固定的若干个选项，或者通过v-for绑定一个数组。

2.1 固定选项

固定选项时，选中项的value与selectedValue双向绑定。

	数据来源--固定选项--选中值{{selectedValue}}
    <br>
    <el-select v-model="selectedValue" placeholder="请选择性别">
      <el-option label="男" value="male"></el-option>
      <el-option label="女" value="female"></el-option>
    </el-select>
1
2
3
4
5
6

效果如下：

2.2 选项绑定数组

选项绑定数组，可以通过v-for循环进行动态绑定。

	数据来源--绑定数组--选中值{{selectedCityId}}
    <br>
    <el-select v-model="selectedCityId" placeholder="请选择城市">
      <el-option v-for="city in citys" :label="city.name" :value="city.id" :key="city.id"></el-option>
    </el-select>
1
2
3
4
5

export default {
  data() {
    return {
      selectedCityId:'',
      citys: [{
        id: 1,
        name: '北京'
      },
      {
        id: 2,
        name: '上海'
      }]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果如下：

3. 功能效果

el-select还封装了一些常用的功能效果，只需要填写一些参数，即可轻松实现这些功能。

3.1 可清空选项

有时候我们希望可以清空已选中的项，此时为el-select添加clearable属性即可。

    可清空选项
    <el-select v-model="selectedValue" placeholder="请选择性别" clearable="">
      <el-option label="男" value="male"></el-option>
      <el-option label="女" value="female"></el-option>
    </el-select>
1
2
3
4
5

效果如下，点击选择器右侧的叉号图标即可清空已选中的选项。

3.2 多选

可以为el-select设置multiple启用多选，注意此时绑定的value为选中项的数组。

 	多选--选中值{{selectedIds}}
    <br>
    <el-select v-model="selectedIds" multiple placeholder="请选择城市">
      <el-option v-for="city in citys" :label="city.name" :value="city.id" :key="city.id"></el-option>
    </el-select>
1
2
3
4
5

export default {
  data() {
    return {
      selectedIds: [],
      citys: [{
        id: 1,
        name: '北京'
      },
      {
        id: 2,
        name: '上海'
      }]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果如下：

3.3 可搜索

如果候选项很多，那么一个个去找非常费劲。el-select提供了搜索功能，只需要为el-select设置filterable即可启用搜索功能。

  	可搜索
    <br>
    <el-select v-model="selectedValue" filterable placeholder="请选择城市">
      <el-option v-for="city in citys" :label="city.name" :value="city.id" :key="city.id"></el-option>
    </el-select>
1
2
3
4
5

效果如下，只需要在选择器的输入栏内输入一个关键词，即可筛选出含有关键词的选项，非常方便好用。

4. 事件响应

下拉框最常用的事件，就是选中项发生变化了，可以使用@change绑定对应方法。

 	选中项变化
    <br>
    <el-select v-model="selectedCityId" placeholder="请选择城市" @change="cityChange" clearable>
      <el-option v-for="city in citys" :label="city.name" :value="city.id" :key="city.id"></el-option>
    </el-select>
    <el-divider></el-divider>
1
2
3
4
5
6

  methods: {
    cityChange() {
      console.log("选中城市id:", this.selectedCityId);
    }
  }
1
2
3
4
5

需要注意的是，清空选中项时，选中项也发生了变化，也会触发cityChange方法。

5. 小结

选择器用途十分广泛，el-select比原生下拉框的功能要丰富很多很多，非常强大易用。