ElementUI el-select组件 同时搜索label与value

项目需要，要求在Select下拉菜单中即能搜索Label里的文字，还要能搜索value的值。

解决办法：

使用el-select里自带的属性filterable

<el-select filterable class="search-input" :filter-method="selectFilter" v-model="selectNav" placeholder="请输入功能名称">
  <el-option
    v-for="item in allSelectNav"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

methods里增加方法selectFilter

selectFilter(val){
  // 判断是否为空
  if( val ){
    // 同时筛选Lable与value的值
    this.allSelectNav = this.SelectNavTemporary.filter((item) => {
      if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase()) || !!~item.value.indexOf(val) || !!~item.value.toUpperCase().indexOf(val.toUpperCase()) ) {
        return true
      }
    })
  }else{
    // 赋值还原
    this.allSelectNav = this.SelectNavTemporary;
  }
},

注解:

定义了两个初始变量：
allSelectNav: 当前下拉菜单的数组 ;
SelectNavTemporary: 临时存放下拉菜单的数组 ;

当页面加载时，首先向allSelectNav里获取下拉菜单的所有列表
然后将 this.SelectNavTemporary = this.allSelectNav 用于存储下拉菜单的所有列表
接着当激活搜索的时候，会直接向selectFilter()里传入输入的参数 val
接着判断当前输入的数值是否为空，如果不为空，则直接进入搜索，如果为空的话，this.allSelectNav = this.SelectNavTemporary; 将之前临时存放的数组再还原给allSelectNav