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

叁歲伎倆 2022-09-03 14:20 1062阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 用途
 *  2. 数据绑定
 *   *  2.1 固定选项
     *  2.2 选项绑定数组
 *  3. 功能效果
 *   *  3.1 可清空选项
     *  3.2 多选
     *  3.3 可搜索
 *  4. 事件响应
 *  5. 小结

# 1. 用途 #

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

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

# 2. 数据绑定 #

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

## 2.1 固定选项 ##

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

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

效果如下：  
![在这里插入图片描述][372f9b0bc029499d9908f2500bdceff5.png_pic_center]

## 2.2 选项绑定数组 ##

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

数据来源--绑定数组--选中值{
 {selectedCityId}}
 
 <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>

export default {
        
      data() {
        
        return {
        
          selectedCityId:'',
          citys: [{
        
            id: 1,
            name: '北京'
          },
          {
        
            id: 2,
            name: '上海'
          }]
        }
      }
    }

效果如下：  
![在这里插入图片描述][c4d2fb5580584ef28c33481433a4f882.png_pic_center]

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

效果如下，点击选择器右侧的叉号图标即可清空已选中的选项。  
![在这里插入图片描述][1b680925cecc4e548cd3c15b579533d6.png_pic_center]

## 3.2 多选 ##

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

多选--选中值{
 {selectedIds}}
 
 <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>

export default {
        
      data() {
        
        return {
        
          selectedIds: [],
          citys: [{
        
            id: 1,
            name: '北京'
          },
          {
        
            id: 2,
            name: '上海'
          }]
        }
      }
    }

效果如下：  
![在这里插入图片描述][1c9a0cc7a36a4050893954d61f99b357.png_pic_center]

## 3.3 可搜索 ##

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

可搜索
 
 <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>

效果如下，只需要在选择器的输入栏内输入一个关键词，即可筛选出含有关键词的选项，非常方便好用。  
![在这里插入图片描述][44419b97ed0640ce87159735231e1607.png_pic_center]

# 4. 事件响应 #

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

选中项变化
 
 <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>

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

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

# 5. 小结 #

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[372f9b0bc029499d9908f2500bdceff5.png_pic_center]: /images/20220829/931f99490cff463b97c8bc9d85350b56.png
[c4d2fb5580584ef28c33481433a4f882.png_pic_center]: /images/20220829/d51d7dda342648babf1e815ae48dedda.png
[1b680925cecc4e548cd3c15b579533d6.png_pic_center]: /images/20220829/3f301928caaa4456ba6d4c60edd8a9e7.png
[1c9a0cc7a36a4050893954d61f99b357.png_pic_center]: /images/20220829/4b8d6e5956ae4eafa58fd00f19831b1e.png
[44419b97ed0640ce87159735231e1607.png_pic_center]: /images/20220829/391003e4e0224bcaa9a00bba5531ddec.png