Element Select下拉 实现拼音、首字母搜索汉字，下拉匹配自动清空问题

效果图

搜索前：

搜索后：

使用

安装插件 pinyin-match：

 npm install pinyin-match --save

下拉：

<el-select v-model="form.robot" placeholder="机器人" @change="robotSearch" filterable :filter-method="robotFilterFn" clearable>
  <el-option v-for="(item, index) in robotList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>

方法：

注意：把 v-model 双向绑定的字段赋值，不想赋值的没 bug 的也可以不赋值（下拉匹配自动清空问题）

import PinyinMatch from 'pinyin-match'

// val 输入框的值，name：数组显示值得字段，freezeArr：原本数组全部下拉的值
letterFilterFcn (val, name, freezeArr) {
  if (val) {
    const arr = freezeArr.filter((item) => {
      // 如果直接包含输入值直接返回true
      if (item[name]) {
        if (item[name].toUpperCase().indexOf(val.toUpperCase()) !== -1) {
          return true
        }
        // 输入值拼音
        return PinyinMatch.match(item[name], val)
      }
    })
    return arr
  } else {
    return freezeArr
  }
},

// 搜索方法，切记 把 v-model 双向绑定的字段赋值
robotFilterFn (val) {
  this.formData.cvRobotId = val
  this.robotList = this.letterFilterFcn(val, 'name', this.freezeArrObj.robotList)
},

robotSearch () {
  this.search()
  this.robotList = this.freezeArrObj.robotList
},

data值：

robotList: [],
freezeArrObj: {
  robotList: []
}

• 传送门：https://blog.csdn.net/wjx_jasin/article/details/109681147