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
    },
相关推荐
zhaoyang030121 分钟前
css3笔记 (1) 自用
前端·javascript·css·vue.js·笔记·html·css3
珎珎啊26 分钟前
CSS3 常用功能详细使用指南
前端·css·css3
moxiaoran57533 小时前
uni-app萌宠案例学习笔记--页面布局和CSS样式设置
前端·css·uni-app
派阿喵搞电子4 小时前
在UI界面内修改了对象名,在#include “ui_mainwindow.h“没更新
c++·qt·ubuntu·ui
CrissChan4 小时前
Pycharm 函数注释
java·前端·pycharm
小小小小宇5 小时前
Vue.nextTick()笔记
前端
pop_xiaoli6 小时前
OC—UI学习-2
学习·ui·ios
小约翰仓鼠6 小时前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in6 小时前
Vue 学习路线图(从零到实战)
前端·vue.js·学习