Element-UI Select 下拉框 根据汉字拼音首字母过滤选择选项

需求来源：

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

需求截图

后台人员已根据首字母进行排序，并返回首字母字段，如图所示：

后台返回的数据格式

那我要根据两个字段进行搜索。 element-ui只提供了 el-select有 filter-method 自定义搜索方法，并没有给出实例。这里记录一下解决方案。

1. 在data中定义两个变量

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

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

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

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

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

点击查看参考原文