vue el-select自定义搜索选择案例

开发中常见的有选择框并且输入关键词可以快速检索功能,刚好这次项目需求,就开始吧

需求:1、生成1000到100000的数可选择,递增1000 2、这些数必须三位数用逗号隔开,比如1,000.00这样的形式显示 3、输入关键词比如10,得出现相关得搜索建议,比如 1000 10000 11000

难点:生成1000到100000的数可选择,递增1000,这些数必须三位数用逗号隔开,自定义搜索显示的数和实际搜索出的数组不一致,需分开,搜索后点击选择后,再次点中搜索框,所有的数据必须都在(这是难点,搞了好久)

效果如下:
在这里插入图片描述
话不多说上代码:

生成1000到100000的数可选择,递增1000,这些数必须三位数用逗号隔开,比如1,000.00这样的形式显示

因为el-select的数据模式是value和label形式,value就是选择的实际值,lable是展示

 generateArray() {
      const start = 1000; // 开始值
      const end = 500000; // 结束值
      const array = [];
      for (let i = start; i <= end; i += 1000) {
        const formattedValue = this.numberWithCommas(i.toFixed(2));
        const item = {
          value: i.toString(),
          label: formattedValue,
        };
        array.push(item);
      }
      return array;
    },
    //金额加逗号 三位
    numberWithCommas(value) {
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },

自定义搜索函数

<el-select
  v-model="money"
 placeholder="请选择"
   style="width: 80%"
   clearable
   filterable 
   :filter-method="handleFilter"
   @change="changeMoney"
   @focus="handleFocus"
   @visible-change="handleVisibleChange"
 >
   <el-option
     v-for="item in MoneyOptions"
     :key="item.value"
     :label="item.label"
     :value="item.value"
   >
   </el-option>
 </el-select>
 // 自定义搜索 
    handleFilter(query) { 
      this.MoneyOptions= this.options.filter((item) => {
          // 这里是用的value选项筛选,默认是label
          return item.value.indexOf(query) > -1;
      });
    },

输入关键词后,不选择,再次点击搜索框,需要把所有的数据都展示出来

这里用到el-select的focus和visible-change和change方法,点中时把数据恢复

// 恢复数据
    handleFocus() {
      this.MoneyOptions= [...this.options]
    },
    handleVisibleChange(visible){
      if(!visible){
        this.handleFocus()
      }
    },
    changeMoney(){
      this.handleFocus()
    },

这样子效果就出现了

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

zabbix监控平台(agent端)

引言&#xff1a;明人不说暗话&#xff0c;上一篇文章我们讲了zabbix的serrver端部署和配置&#xff0c;今天详细讲解一下agent端服务器&#xff08;客户端&#xff09;的配置和关联 1.进入官网 Zabbix&#xff1a;企业级开源监控解决方案 2.进入下载页面选择需要下载的版本信…

【JVM】JVM概述

JVM概述 基本介绍 JVM&#xff1a;全称 Java Virtual Machine&#xff0c;即 Java 虚拟机&#xff0c;一种规范&#xff0c;本身是一个虚拟计算机&#xff0c;直接和操作系统进行交互&#xff0c;与硬件不直接交互&#xff0c;而操作系统可以帮我们完成和硬件进行交互的工作特…

【网络安全】2024年一个漏洞4w+,网安副业挖SRC漏洞,躺着把钱挣了!

一个漏洞奖励2w&#xff0c;这是真实的嘛&#xff01; 作为资深白帽&#xff0c;入行网安这些年也一直在接私活&#xff0c;副业赚的钱几乎是我工资的三倍&#xff01;看到最近副业挖漏洞的内容非常火爆&#xff0c;我便决定将自己的经验分享出来&#xff0c;带我的粉丝们一起…

Vue3在点击菜单切换路由时,将ElementPlus UI库中el-main组件的内容滚动恢复到顶部

功能&#xff1a;Vue3在点击菜单切换路由时&#xff0c;将页面el-main的内容滚动到顶部&#xff0c;布局如下&#xff0c;使用UI组件库为ElementPlus 在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或 window.scrollTo(0,0) 滚动&#xff0c;但…

深入Docker5:安装nginx部署完整项目

目录 准备 为什么要使用nginx mysql容器构建 1.删除容器 2.创建文件夹 3.上传配置文件 4.命令构建mysql容器 5.进入mysql容器&#xff0c;授予root所有权限 6.在mysql中用命令运行sql文件 7.创建指定数据库shop 8.执行指定的sql文件 nginx安装与部署 1.拉取镜像 2…

c语言:用一个宏,可以将一个整数的二进制位的奇数位和偶数位交换。

题目 用一个宏&#xff0c;可以将一个整数的二进制位的奇数位和偶数位交换。 如&#xff1a;01&#xff0c;是1&#xff0c;交换完是10&#xff0c;是2. 思路 1.分别取出奇数位上的数字和偶数位上的数字 举个例子&#xff1a;1001 0110 1001 0110 奇…

4. 示例:更改监听端口

默认Spring Boot启动是监听在8080上的。 如果8080被使用&#xff0c;就会报以下错误。 这个时候可以更换一个新的端口。 server: port: 8180 然后再启动&#xff0c;启动成功并且绑定到端口8180。

【计算机硬件】2、指令系统、存储系统和缓存

文章目录 指令系统计算机指令的组成计算机指令执行过程指令的寻址方式&#xff08;怎么样找到操作数&#xff1f;&#xff09;1、顺序寻址2、跳跃寻址 指令操作数的寻址方式&#xff08;怎么样找到操作数&#xff1f;&#xff09;1、立即寻址方式2、直接寻址方式3、间接寻址方式…

JRT和springboot比较测试

想要战胜他&#xff0c;必先理解他。这两天系统的学习Maven和跑springboot工程&#xff0c;从以前只是看着复杂到亲手体验一下&#xff0c;亲自实践的才是更可靠的了解。 第一就是首先Maven侵入代码结构&#xff0c;代码一般要按约定搞src/main/java。如果是能严格执行测试的项…

Windows系统还原打印机系统教程

同时按下键盘WinR键&#xff0c;在运行窗口输入services.msc后点击确定或者回车。 找到Print Spooler&#xff0c;选中右键&#xff0c;点击停止。 复制地址&#xff1a;C:\Windows\System32\spool\drivers 打开我的电脑&#xff0c;复制到地址栏后回车&#xff0c;分别删除文件…

Tomcat10.X部署老版本axis2 webservice项目不生效

目录 一、使用场景 二、问题描述 三、原因排查 四、解决方案 一、使用场景 原来项目是OpenJDK8tomcat9构建&#xff0c;现在需要升级到OpenJDK17tomcat10的组合。原来的webservice项目打包成aar格式&#xff0c;通过axis2部署在tomcat上。 二、问题描述 在配置好jdk和to…

android 自定义八边形进度条

自定义八边形动画效果图如下 绘制步骤&#xff1a; 1.先绘制橙色底部八边形实心 2.黑色画笔绘制第二层&#xff0c;让最外层显示一条线条宽度即可 3.再用黄色画笔绘制黄色部分 4.使用渐变画笔根据当前进度绘制覆盖黄色部分 5.使用黑色画笔根据当前进度绘制刻度条 6.黑色画笔绘制…

SQL-窗口函数

什么是窗口函数 可以像聚合函数一样对一组数据进行分析并返回结果&#xff0c;二者的不同之处在于&#xff0c;窗口函数不是将一组数据汇总成单个结果&#xff0c;而是为每一行数据都返回一个结果。 窗口函数组成部分 1.创建数据分区 窗口函数OVER子句中的PARTITION BY选项用…

【Flutter 问题系列第 80 篇】TextField 输入框组件限制可输入的最大长度后,输入的内容中包含表情符号时,获取输入的内容数还是会超出限制的问题

这是【Flutter 问题系列第 80 篇】&#xff0c;如果觉得有用的话&#xff0c;欢迎关注专栏。 博文当前所用 Flutter SDK&#xff1a;3.10.5、Dart SDK&#xff1a;3.0.5 一&#xff1a;问题描述 在输入用户名称、简介等内容时&#xff0c;一般我们都会限制输入框内最大可输入…

深入解析JavaScript的原生原型

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 在JavaScript中,除了自定义对象,还存在很多由JavaScript语言本身提供…

vue3 知识

vue3介绍 Vue3的变化: 1、vue3完全兼容vue2&#xff0c;但是vue3不建议用vue2的写法 2、拥抱TypeScript&#xff0c;ts完全兼容js 3、组合式API和配置项API vue2 是配置项api vue3 组合式api vue3项目创建和启动 # 创建vue3项目&a…

C++创建窗口程序

实现一个基本的 Windows 应用程序&#xff0c;使用 C 和 WinAPI&#xff08;Windows API&#xff09;编写。运行这段代码时&#xff0c;它将显示一个标题为“Hello World”的窗口&#xff0c;并且可以通过关闭窗口来结束程序。 #include <windows.h> // 包含Windows头文…

【Python3】【力扣题】389. 找不同

【力扣题】题目描述&#xff1a; 【Python3】代码&#xff1a; 1、解题思路&#xff1a;使用计数器分别统计字符串中的元素和出现次数&#xff0c;两个计数器相减&#xff0c;结果就是新添加的元素。 知识点&#xff1a;collections.Counter(...)&#xff1a;字典子类&#x…

ONLYOFFICE:开源、免费、安全,打造定制化办公平台的最佳选择

文章目录 写在前面ONLYOFFICE是什么&#xff1f;ONLYOFFICE的惊艳之处齐全的插件&#xff0c;助你锦上添花部署一款自己的安全可靠的办公平台写在最后 写在前面 说起 Office 办公软件&#xff0c;我想大家最常用的应该就是微软的 Microsoft Office 以及国产的 WPS Office。两款…

C语言:进制转换以及原码、反码、补码

一、二进制 其实我们经常能听到2进制、8进制、10进制、16进制这样的讲法&#xff0c;那是什么意思呢&#xff1f;其实2进制、8进制、10进制、16进制是数值的不同表⽰形式⽽已。 比如&#xff1a; 数值15的各种进制的表⽰形式&#xff1a; 15的2进制&#xff1a;1111 15的8进…
最新文章