element-ui —— select 下拉框 根据汉字拼音首

需求来源：

筛选项过多，想快速的找到要选择的医院，可以输入医院名或医院首字母进行搜索。

需求截图
后台人员已根据首字母进行排序，并返回首字母字段，如图所示： 后台返回的数据格式
那我要根据两个字段进行搜索。element-ui只提供了el-select有filter-method 自定义搜索方法，并没有给出实例。这里记录一下解决方案。

1. 在data中定义两个变量

copyHospitalList: [], // 备份医院列表
hospitalList: [], // 医院列表

2. 在mounted中进行赋值 保留数据源

this.copyHospitalList = Object.assign(this.hospitalList);

3. 医院下拉列表 用filter-method绑定方法

<el-select v-model="info.hospital"
  filterable
  :filter-method="hospitalFilter"
  placeholder="请选择所属医院"
  size="medium">
  <el-option
    v-for="item in hospitalList"
    :key="item.unitId"
    :label="item.hospitalName"
    :value="item.unitId"
  ></el-option>
</el-select>

4. js 在methods中写

/**
 * 筛选所属医院
 */
hospitalFilter (v) {
  // v为input输入的模糊查询项
  this.hospitalList = this.copyHospitalList.filter((item) => {
    // 如果直接包含输入值直接返回true
    if (item.hospitalName.indexOf(v) !== -1 || item.firstPinyin.indexOf(v) !== -1 || item.firstPinyin.indexOf(v.toUpperCase()) !== -1) return true;
    // toUpperCase 英文字母转换大小写
  });
}

这样输入“常州”或输入“C”或输入“c”均能查到对应的医院啦~

结果图1
结果图2
结果图3

点击查看参考原文

如果你也经常使用element-ui 可持续关注 Element UI 入坑小结
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！