el-select、el-tree、el-cascader 搜索功能(支持大小写)

第一种方法:组件自定义方法 (支持大小写的前提是后端需要提供大写和小写的字段,或者自己将value值转换)

第一步:HTML上配置


 

第二步:

filter(data,value){ // 弹窗 - 拼音过滤 
     return data.data.pinyin.indexOf(value) !== -1 || data.data.label.indexOf(value) !== -1
 },

第二种:方法使用cnchar插件实现,非常简单!(支持大小写)

第一步:安装cnchar,有两种方式
a、
b、npm install cnchar
第二步:HTML上配置


 

第三步:mothed上自定义搜索方法

filter(data,value){ // data是对象,value是输入的要搜索的具体值
            if (!value) return true
            if (data.label.indexOf(value) !== -1) return true

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

            // 大写拼音搜索
            // 将label拆散成小写拼音数组
            const arrUp = data.label.spell('up', 'array')
            // 拼接成完整label的拼音
            const spellUp = arrUp.join('')
            // lengths 是label完整拼音 中每个汉字第一个拼音字母的index值的数组
            const lengthsUp = [0]
            for (var i = 0; i < arrUp.length - 1; i++) {
                lengthsUp.push(lengthsUp[i] + arrUp[i].length)
            }
            // 判断label完整拼音 中 输入值的 index 是不是等于某个汉字第一个拼音字母的index值
            return lengthsUp.indexOf(spellUp.indexOf(value)) !== -1
        },

你可能感兴趣的:(el-select、el-tree、el-cascader 搜索功能(支持大小写))