element ui--下拉根据拼音首字母过滤

很多场景下我们的下拉不仅仅要根据选项中的字过滤,还要根据拼音首字母过滤,现在我们来实现下。

要获取汉字拼音,可以用pinyin-pro库来实现

1.导入拼音库

复制代码
npm install pinyin-pro

下面的代码可以获取companyName的拼音,返回的是数组,不包含声调

javascript 复制代码
import { pinyin } from 'pinyin-pro';

pinyin(companyName, { toneType: 'none', type: 'array' })

2.调用接口,获取数据,然后遍历数据,设置拼音首字母

javascript 复制代码
    getCompanyList() {
      this.reportLoading=true
      listBasecompany({pageNum: 1,
        pageSize: 100,req:{isValid:1}}).then(response => {
        response.data.content.forEach(item=>{
          //组合拼音首字母
          item.firstPinyin = pinyin(item.companyName, { toneType: 'none', type: 'array' }).map(item=>{
            return item.substring(0, 1).toLowerCase()
          }).join('')
        })
        this.companyList = response.data.content;
        this.filterCompanyList = Object.assign(this.companyList);
      }).finally(()=>{
        this.reportLoading=false
      });
    },

这段代码的作用就是拿到汉字的拼音首字母,如天气返回的就是tq

我们要克隆一份filterCompanyList,option需要通过这个来生成

我们看下html代码怎么写

html 复制代码
          <el-form-item
            label="单位名称"
            prop="companyId"
            class="label-right-align"
          >
            <el-select
              v-model="checkForm.companyId"
              class="full-width-input"
              :filter-method="companyFilter"
              clearable
              filterable
              style="width: 110%"
              @clear="clearCompany"
            >
              <el-option
                v-for="(item, index) in filterCompanyList"
                :key="item.id"
                :label="item.companyName"
                :value="item.id"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>

我们来看下重点代码,需要开启filterable,然后重写filter-method方法,el-option的key要用id,不要用index,否则某些输入会导致select重渲染导致输入框里面的值丢失

companyFilter就比较简单了,把包含输入项,或者起始是拼音首字母的过滤出来,赋值给filterCompanyList

javascript 复制代码
    companyFilter(v) {
      this.filterCompanyList = this.companyList.filter((item) => {
        // 如果直接包含输入值直接返回true
        if (item.companyName.indexOf(v) !== -1 || item.firstPinyin.startsWith(v)) return true;
      });
    },

最后一点注意事项,如果你开启了clearable,要重写clear方法

javascript 复制代码
	clearCompany(){
      this.filterCompanyList=this.companyList
    },
相关推荐
小满zs1 小时前
Zustand 第四章(中间件)
前端·react.js
GalaxyPokemon2 小时前
LeetCode - 2. 两数相加
java·前端·javascript·算法·leetcode·职场和发展
dualven_in_csdn5 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友5 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程6 小时前
纯前端做图片压缩
开发语言·前端·javascript
银色的白6 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
应巅6 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
萌萌哒草头将军7 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
Jimmy7 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz7 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html