element-ui中el-select下拉框实现拼音、首字母、汉字等模糊搜索

1. // 安装 pinyin-match
   npm install pinyin-match --save

2.引入
import PinyinMatch from 'pinyin-match'

3.ele下拉框 :filter-method="handleFilter"

<el-select filterable :filter-method="handleFilter">
                      <el-option
                        v-for="item in orderDetails"
                        :key="item.id"
                        :label="item.codeName"
                        :value="item.id"
                      ></el-option>
                    </el-select>

4.注意

// 复制
//data中新建copyOrderDetails =[]
this.copyOrderDetails = Object.assign(this.orderDetails)

5.方法赋值

handleFilter(val) {
      // 对绑定数据赋值
      if (val) {
          //orderDetails 请求过来的options数据
        this.orderDetails = this.copyOrderDetails.filter((item) => {
          // 如果直接包含codeName输入值直接返回true
          if (item.codeName) {
            if (item.codeName.toUpperCase().indexOf(val.toUpperCase()) != -1) {
              return true
            }
            // 输入值拼音d
            return PinyinMatch.match(item.codeName, val)
          }
        })
      } else {
        this.orderDetails = this.copyOrderDetails
      }
    }