基于elementui的e-select、el-cascader拼音搜索

本文链接：https://blog.csdn.net/weixin_43787161/article/details/140063675

安装PinyinMatch

npm install pinyin-match --save

el-select

<el-select
  v-model="dataForm.returnUserId"
  clearable
  filterable
  :filter-method="handleFilter"
  placeholder="请选择"
>
  <el-option
    v-for="item in userList"
    :key="item.userId"
    :label="item.name"
    :value="item.userId"
  >
  </el-option>
</el-select>

this.teamUserList = ["小明","小红","小绿"];
// 复制
 this.copyTeamUserList = Object.assign(this.teamUserList);
handleFilter1(val) {
      // 对绑定数据赋值
      if (val) {
        this.teamUserList = this.copyTeamUserList.filter((item) => {
          // 如果直接包含输入值直接返回true
          if (item.label) {
            if (item.label.toUpperCase().indexOf(val.toUpperCase()) != -1) {
              return true;
            }
            // 输入值拼音d
            return PinyinMatch.match(item.label, val);
          }
        });
      } else {
        this.teamUserList = this.copyTeamUserList;
      }
    },

el-cascader

<el-cascader
   v-model="dataForm.newreturnUserId"
   :options="teamUserList"
   :show-all-levels="false"
   filterable
   clearable
   :filter-method="handleFilter"
 >
   <template slot-scope="{ node, data }">
     <span>{{ data.label }}</span>
     <span v-if="!node.isLeaf">
       ({{ data.children.length }})
     </span>
   </template>
 </el-cascader>

  this.teamUserList = ["小明","小红","小绿"];
  handleFilter(node, keyword) {
      if (
        !!~node.text.indexOf(keyword) ||
        !!~node.text.toUpperCase().indexOf(keyword.toUpperCase())
      ) {
        return true;
      }
      if (PinyinMatch.match(node.label, keyword)) {
        return true;
      }
    },