Element UI 多选搜索实现拼音匹配

转载，感谢原博主，自己也做个记录。
确实好用，增加了对拼音的匹配

• 需要使用 js 拼音库 CnChar ，这个库主要就是做汉字转拼音和汉字笔画数的。使用 npm i cnchar 就可以安装使用啦，详细的使用 CnChar 文档里有介绍。
• -过滤方法使用 CnChar 提供的 .spell方法可以获取拼音数组。

代码：

import cnchar from "cnchar"
————————————————————————————————————————————
 mounted() {
    
    
            //保留数据源
            this.copy = Object.assign(this.options);
    },
————————————————————————————————————————————
      filterFunction(val) {
    
    
        //对绑定数据赋值  teacher_id  teacher_name
        this.teacherList = this.copy.filter((item) => {
    
    
            //如果直接包含输入值直接返回true
            if (item.teacher_name.indexOf(val) !== -1) return true;

            // 如果输入的是汉字则按组件默认逻辑进行匹配
            let reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
            if(reg.test(val)){
    
    
              console.log('是汉字')
              return
            }

            //将label拆散成小写拼音数组
            let arr = item.teacher_name.spell('low', 'array');
            //拼接成完整label的拼音
            let spell = arr.join('');
            //lengths 是label完整拼音 中每个汉字第一个拼音字母的index值的数组
            let lengths = [0];
            for (var i = 0; i < arr.length - 1; i++) {
    
    
                lengths.push(lengths[i] + arr[i].length);
            };
            //判断label完整拼音 中 输入值的 index 是不是等于某个汉字第一个拼音字母的index值
            return lengths.indexOf(spell.indexOf(val)) !== -1;
        })