1.在el-select里開啟filterable搜索功能 添加:filter-method="selectFilter" 通過自定義搜索

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

2.在methods里增加方法selectFilter

定義了兩個初始變量：
//filterArr : 當(dāng)前下拉框的數(shù)組,即過濾后的數(shù)據(jù)
//temporary: 臨時存放下拉菜單的數(shù)組即原始數(shù)據(jù) ;
selectFilter(val){
  // 判斷是否為空
  if( val ){
    // 同時篩選Lable與value的值
    this.filterArr = this.temporary.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.filterArr = this.temporary;
  }
},

3.注意事項

//當(dāng)頁面加載時，首先向filterArr 里獲取下拉菜單的所有列表即原數(shù)據(jù)
//然后將 this.temporary= this.filterArr 用于存儲下拉菜單的所有列表
接著當(dāng)激活搜索的時候，會直接向selectFilter()里傳入輸入的參數(shù) val
//接著判斷當(dāng)前輸入的數(shù)值是否為空，如果不為空，則直接進(jìn)入搜索，如果為空的話，
//this.filterArr = this.temporary; 將之前臨時存放的數(shù)組再還原給filterArr