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

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

要获取汉字拼音,可以用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},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65098.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《QT 5.14.1 搭建 opencv 环境全攻略》

《QT 5.14.1 搭建 opencv 环境全攻略》 一、引言二、准备工作&#xff08;一&#xff09;软件下载&#xff08;二&#xff09;系统环境确认 三、安装 QT 5.14.1&#xff08;一&#xff09;安装包下载与运行&#xff08;二&#xff09;环境变量配置 四、OpenCV 安装与配置&#…

python实现根据搜索关键词爬取某宝商品信息

当程序打开淘宝登陆页面后&#xff0c;需要快速手动登录淘宝&#xff0c;如果服务报错&#xff0c;需要重新登录&#xff01; pip安装库 pip install pyquery pip install selenium pip install openpyxl # 代码说明&#xff1a;代码功能&#xff1a; 基于ChromeDriver爬取tao…

Vue3 中使用axios

1.安装axios、js-cookie、pinia axios命令行&#xff1a; npm install axios js-cookie命令行&#xff1a; npm install js-cookie store命令行&#xff1a; npm install pinia 2.配置文件 (1)缓存文件配置 src/plugins/auth.js const sessionCache {set (key, valu…

从AI换脸到篡改图像,合合信息如何提升视觉内容安全?

本文目录 引言一、AI“真假之战”下的发展现状与考验挑战1.1 视觉内容安全现状与技术分类1.2视觉内容安全企业1.3视觉内容安全领域挑战 二、开山之石&#xff1a;引领视觉内容安全的创新之路2.1合合内容安全系统2.2发起编制相关技术规范2.3参与篡改检测挑战赛 三、视觉内容安全…

IBatis和MyBatis在细节上的不同有哪些

iBatis 和 MyBatis 都是流行的 Java 持久化框架&#xff0c;用于简化数据库交互。MyBatis 是从 iBatis 演化而来&#xff0c;MyBatis 在 iBatis 的基础上做了很多改进和优化&#xff0c;因此两者在设计和功能上存在一些差异。以下是它们在细节上的主要区别&#xff1a; 1. 框架…

解决Ubuntu下无法装载 Windows D盘的问题

电脑安装了 Windows 和 Ubuntu 24.04 后&#xff0c;在Ubuntu系统上装载 D盘&#xff0c;发现无法装载错误如下&#xff1a; Error mounting /dev/nvme0n1p4 at /media/jackeysong/Data: wrong fs type, bad option, bad superblock on /dev/nvme0n1p4, missing codepage or h…

STM32-笔记10-手写延时函数(SysTick)

1、什么是SysTick Systick&#xff0c;即滴答定时器&#xff0c;是内核中的一个特殊定时器&#xff0c;用于提供系统级的定时服务。该定时器是一个24位的倒计数定时器‌。它从设定的初值&#xff08;即重载值&#xff09;开始计数&#xff0c;每经过一个系统时钟周期&#xff0…

“AI+Security”系列第4期(一)之“洞” 见未来:AI 驱动的漏洞挖掘新范式

在数字化浪潮下&#xff0c;安全漏洞问题日益严峻&#xff0c;成为各行业发展的重大挑战。近日&#xff0c;“AISecurity” 系列第 4 期线下活动于北京成功举办&#xff0c;聚焦 “洞” 见未来&#xff1a;AI 驱动的漏洞挖掘新范式&#xff0c;汇聚了安全领域的众多专家。 本次…

LeetCode 热题 100_LRU 缓存(35_146_中等_C++)(哈希表 + 双向链表)(构造函数声明+初始化列表=进行变量初始化和赋值)

LeetCode 热题 100_LRU 缓存&#xff08;35_146&#xff09; 题目描述&#xff1a;输入输出样例&#xff1a;题解&#xff1a;解题思路&#xff1a;代码实现&#xff08;思路一&#xff08;哈希表 双向链表&#xff09;&#xff09;&#xff1a;部分代码解读 题目描述&#xf…

攻防世界 PHP2

开启场景 访问 /index.php&#xff0c;页面无变化 访问 /index.phps index.php 和 index.phps 文件之间的主要区别在于它们的文件扩展名。 index.php&#xff1a;这是一个标准的 PHP 文件&#xff0c;通常用于编写 PHP 代码。当用户访问 index.php 文件时&#xff0c;Web 服务器…

AI应用-本地模型实现AI生成PPT(简易版)

文章目录 前言技术栈效果展示 一、实现思路二、实现步骤1.本地安装marp-cli2.后端实现3.前端实现 三、代码地址及说明 前言 在许多项目中&#xff0c;生成 PPT 是常见的需求&#xff0c;尤其在教育和报告展示中。传统的生成 PPT 的方法需要手动创建&#xff0c;而使用生成模型…

项目2路由交换

背景 某学校为满足日常教学生活需求&#xff0c;推动数字校园的建设&#xff0c;学校有办公楼和学生宿舍楼和服务器集群三块区域&#xff0c;请合理规划IP地址和VLAN&#xff0c;实现企业内部能够互联互通现要求外网能通过公网地址访问服务器集群&#xff0c;学生和老师能正常…

快速掌握Haproxy原理架构

文章目录 一、原理架构二、无负载均衡三、四层负载均衡的工作流程四、七层负载均衡工作流程五、基础属性mode 属性retries 属性maxconn 属性clitimeout 属性servtimeout 属性states uri 属性 一、原理架构 四层tcp代理&#xff1a;Haproxy仅在客户端和服务器之间双向转发流量&…

02、并发编程的三大特性

并发编程有三大特性分别是&#xff0c;原子性&#xff0c;可见性&#xff0c;有序性。会产生这些特性的根本原因是现在的服务器都是多CPU多核心数的&#xff0c;每个CPU都有自己单独的一套缓存和pc系统&#xff0c;而且程序在运行时按照JMM的规范&#xff0c;它们是需要先把数据…

企业数字化转型和人工智能(AI)之间的关系

企业数字化转型和人工智能&#xff08;AI&#xff09;之间的关系可以被理解为 “驱动与支撑” 的关系&#xff1a;AI 是数字化转型的重要技术驱动力&#xff0c;而数字化转型为 AI 的应用提供了场景和数据支持。两者相辅相成&#xff0c;共同推动企业向智能化发展。 数字化转型…

STM32和精准的型号STM32F03C8T6 ——ADC通道数目区别

注意表达方式的区别 5&#xff0e;STM32芯片内部集成的&#xff08;12&#xff09;位ADC是一种逐次逼近型模拟数字转换器&#xff0c;具 有&#xff08;18&#xff09;个通道&#xff0c;可测量&#xff08;16&#xff09;个外部和(2)个内部信号源。 书上原话&#xff1a;STM32…

【项目构建】Gradle入门

本文适用&#xff1a; 不知道什么是项目构建&#xff0c;可以了解下Ant&#xff0c;Maven&#xff0c;Gradle的区别。知道什么是项目构建&#xff0c;了解Ant&#xff0c;Maven&#xff0c;可以看到Gradle是怎么做的。知道什么是项目构建&#xff0c;了解Ant&#xff0c;Maven&…

java栈--数据结构

前言 java实现数据结构栈&#xff1a;用顺序表存储的栈和数组存储的栈。 本文源代码网址&#xff1a;https://gitee.com/zfranklin/java/tree/master/dataStructure/src/com/njupt/stack https://gitee.com/zfranklin/java/tree/master/dataStructure/src/com/njupt/stack 栈…

2.5.2 文件结构、目录及存取

文章目录 文件结构文件目录存取 文件结构 文件结构是文件的组织形式。从用户角度观察到的结构是逻辑结构&#xff0c;从机器实现存储的角度观察&#xff0c;看到的是物理结构。 逻辑结构 有结构的记录式文件&#xff1a;文件中记录的长度都相同&#xff0c;称为定长记录。文件…

Highcharts 饼图:数据可视化利器

Highcharts 饼图&#xff1a;数据可视化利器 引言 在数据可视化的领域中&#xff0c;饼图作为一种经典且直观的图表类型&#xff0c;被广泛应用于各种行业和场景中。Highcharts&#xff0c;作为一个功能强大且易于使用的JavaScript图表库&#xff0c;为我们提供了创建交互式和…