pinyingMatch

关于 pinyingMatch 插件的使用

实现效果直接上图！

使用场景

• 项目中使用到elementui 的下拉框组件，下拉框组件数据较多，选择非常的麻烦，通过pinyin-match库，能快速检索目标，十分的人性

使用步骤

1. 安装

npm install pinyin-match --save

2. 在elementUI的el-select组件中使用

• 使用到了el-select组件的 filter-method 属性
• 关于filter-method是el-select组件的自定义搜索方法的回调，点我直接跳转查看官网

html结构如下：

<el-select v-model="form.user" size="small" class="form-user" clearable placeholder="请选择角色成员" filterable
           @change="getUserInfo" :filter-method="pinyingMatch">
    <el-option v-for="item in brand" :key="item.mail" :label="item.name" :value="item.mail"></el-option>
</el-select>

逻辑处理如下：

import pinyingMatch from 'pinyin-match';

pinyingMatch(val) {
    if (val) {
        var result = []
        this.userList.forEach(e => {
            var m = pinyingMatch.match(e.name, val)
            if (m) {
                result.push(e)
            }
        })
        this.brand = result
    } else {
        //没有搜索到数据，就还展示所有的brand 
        this.brand = this.userList
    }
}

• 说明：这里userList数据是重置的下拉框数据用的，brand是用于结构循环展示的数据，即下拉框里面展示的数据，val参数是接收到的下拉框填写的关键词

pinyingMatch 插件的使用灰常的简单，设计非常的银杏，快去试试吧！