element下拉框的自定義篩選

在element框架中的el-select標籤的子標籤el-option中需要綁定兩個屬性，分別是label和value，通常我們對接接口和頁面展示的內容是不同的，label是用於顯示於頁面中的內容，例如我們要實現一個下拉框，是否已婚：然後下拉框分別對應的值爲是和否，選中是就傳參數flag=1，否就flag=0，因此我們的在綁定el-option的屬性時就應當，綁定label爲是否，value爲1和0即可實現。

• 需求：實現下拉框用戶選擇，只顯示用戶的名字，可根據電話或者姓名篩選
  在el-select中綁定屬性filterable即可進行搜索，但是這個搜索只是針對綁定的所有label值進行篩選的，需求又是需要進行姓名和電話進行篩選，在這裏我們就要用到我們的自定義篩選方法了，首先在el-select中綁定屬性**filter-method=“dataFilter”**這裏的dataFilter是我們的方法名，在此方法中對所有的數據進行篩選操作，代碼如下

	dataFilter(val) {
      console.log(val)
      this.optionDefault = val
      if (val) {
        this.finSelectData = this.selectData.filter(item => {
          if (item.value.indexOf(val) != -1) {
            return true
          }
        })
        console.log(this.finSelectData)
      } else {
        this.finSelectData = this.selectData
      }
    },

代碼中的finSelectData是我們綁定在el-select中的數據，selectData是我們所要進行操作的數據，val是我們下拉框輸入之後會生成的值，通過val來篩選，finSelectData是selectData的一個副本，它是一個數組，每一項是一個對象，對象中包含label和value兩個屬性分別對應的是el-option中的label和value兩個值，value屬性中包含返回的姓名和電話的字符串，通過它來篩選出label的值，最終顯示在下拉框中。