汝南企业网站建设_手机软件下载网站_网络营销的背景和意义_桂平网络推广

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

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

1.导入拼音库

npm install pinyin-pro

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

import { pinyin } from 'pinyin-pro';pinyin(companyName, { toneType: 'none', type: 'array' })

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

    getCompanyList() {this.reportLoading=truelistBasecompany({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代码怎么写

          <el-form-itemlabel="单位名称"prop="companyId"class="label-right-align"><el-selectv-model="checkForm.companyId"class="full-width-input":filter-method="companyFilter"clearablefilterablestyle="width: 110%"@clear="clearCompany"><el-optionv-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

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

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

	clearCompany(){this.filterCompanyList=this.companyList},