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的值，最终显示在下拉框中。