element-UI中el-select组件使用拼音进行模糊匹配可选择项

一、安装pinyin-match包

yarn add pinyin-match

二、引入包

import PinYinMatch from 'pinyin-match';

三、直接上代码

<el-select v-model="value" multiple filterable clearable :filter-method="match">
    <el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

import PinYinMatch from 'pinyin-match';
export default {
    data(){
        value: [],//选中的值
        dataSource: '',//原始的集合
        optionList: '',//筛选出的结果
    },
    methods: {
        match(value){
            if(value){
                let result = [];
                this.dataSource.forEach(item=>{
                    let matchResult = PinYinMatch.match(item.label, value);
                    if(matchResult){
                        result.push(item);
                    }
                });
                this.optionList = result;
            }else{
                this.optionList = this.dataSource;
            }
        }
    },
    created(){
        this.dataSource = [
            {label: '测试1', value: 1},
            {label: '测试2', value: 2},
            {label: '测试3', value: 3},
        ];
        this.optionList= [
            {label: '测试1', value: 1},
            {label: '测试2', value: 2},
            {label: '测试3', value: 3},
        ];
    }
}

四、实现效果