vue element-ui slelect实现过滤简拼搜索

1.安装依赖包

npm install pinyin-match --save

2.文件引入

import PinyinMatch from 'pinyin-match'

3.新建copyCustomer复制一份customer

4.创建PinyinMatch方法

PinyinMatch(val){
 if(val){
    let result = []
    this.copyCustomer.forEach(i=>{
      let m = PinyinMatch.match(i.name,val) //name是要过滤的字段
      if (m) {
        result.push(i)
      }
    })
    this.customer = result
  }else{
    this.customer=this.copyCustomer
  }
},

5.添加过滤搜索方法:filter-method=‘PinyinMatch’

<el-select v-model="form.customerId" style="width:100%" filterable placeholder="请选择" :filter-method='PinyinMatch'>
  <el-option v-for="item in customer" :key="item.id" :label="item.name" :value="item.id" />
</el-select>

效果

完成
参考