vue实现下拉列表远程搜索示例(根据关键词模糊搜索)

ddd687e7aa21cf72428b09dc9a6f559c.png

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂

前言

昨天的链接没有放上去……大家访问新站的时候,可以在浏览器地址栏中输入:www.穆雄雄.com或者www.muxiongxiong.cn都可以。

今天分享的效果如下:

fc1a2d72d90f922179efdb7eb998b12a.png
image-20211129150940201

说明

因为部门是全国所有的中心,所以有点多,原来采用的是下拉框来实现的,但是让客户从1W+的数据中找到自己想要的,显然不太现实,况且放在服务器上总是会报加载超时的错。

介于此,于是我们就想了个办法,通过远程搜索下拉的这种方式来实现,只需让客户输入关键词,通过远程只能搜索关键词让客户选择自己所要的部门。(PS:这种方式,放在服务器上还是会报加载超时的错,目前正在优化)

实现

技术栈使用的还是springboot+vue,首先需要将表单处替换成如下代码:

<el-form-item label="部门" prop="deptId"><el-selectv-model="form.deptId"filterableremotereserve-keywordplaceholder="请输入关键词":remote-method="remoteMethod":loading="loading"><el-optionv-for="item in deptListLikeInfo":key="item.deptId":label="item.deptName":value="item.deptId"></el-option></el-select></el-form-item>

官方解释是这样的,我觉得说的很明白了:

为了启用远程搜索,需要将filterableremote设置为true,同时传入一个remote-methodremote-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值。需要注意的是,如果el-option是通过v-for指令渲染出来的,此时需要为el-option添加key属性,且其值需具有唯一性,比如此例中的item.value

methods写的如下方法:

remoteMethod(query) {if (query !== '') {this.loading = true;setTimeout(() => {this.loading = false;this.deptListLikeInfo = this.deptListFilter.filter(item => {return item.deptName.indexOf(query) > -1;});}, 200);} else {this.options = [];}},

data中声明如下两个变量,我都有注释:

//部门列表,用来下拉列表模糊查询deptListLikeInfo:[],//筛选完的部门列表信息deptListFilter:[],

mounted中写如下代码,页面加载完时,将所有的部门查询出来。

mounted() {listDeptAll().then((res) => {this.deptListFilter = res.data;});},

总结

超时可能是这个原因,mounted中的代码,回头将这一块儿优化优化,因为在本地是没有问题的,问题只出现在服务器上,大家要是还有别的方法,或者建议,可以留言哈,采纳必有奖励~

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

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

相关文章

P3538-[POI2012]OKR-A Horrible Poem【hash,字符串】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP3538 题目大意 给一个字符串&#xff0c;有q个询问&#xff0c;询问一个区间最短循环节。 解题思路 首先最短循环节长度一定长度的约数&#xff0c;所以我们可以枚举约数&#xff0c;然后判断循环节…

编译原理(三)之语义分析

采用实验1的简单语言&#xff0c;设计并实现含多条简单赋值语句的语法语义分析程序&#xff0c;要求采用递归下降翻译法。 注意与实验1、2的衔接。 using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.T…

活动: 北京Xamarin分享会第6期(2017年9月9日)

每月第二个周六&#xff0c;北京丹棱街5号微软大厦&#xff0c;有什么活动&#xff1f;对, BXUG线下分享活动又来啦! 本次分享嘉宾阵容庞大&#xff0c;在金秋凉爽的季节&#xff0c;期待与大家面对面的交流。内容预告&#xff1a; 案例分享&#xff1a;某大型国企IT项目如何采…

捡到东西说给钱才给东西?算不算敲诈勒索……

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂”前言前两天&#xff0c;将一个那天急要但是后来就不重要的东西&#xff0c;放在车筐里面&#xff0c;结果到目的地一看&#xff0c;没了……椅子还没坐热&#xff0c;有人打来电话了“你…

编译原理(四)之解析语言翻译成三地址代码

选择部分C语言的语法成分&#xff0c;设计其词法语法语义分析程序。 设计并实现一个一遍扫描的词法语法语义分析程序&#xff0c;将部分C语言的语法成分翻译成三地址代码&#xff0c;要求有一定的出错提示和错误恢复功能。 例如简单赋值语句&#xff1a; area3.14*a*a; s 2*…

POJ3784-Running Median(运行中位数)【链表】

正题 题目链接&#xff1a;http://poj.org/problem?id3784 题目大意 给出n个数&#xff0c;每两个数输出一次到目前为止输入了的所有数的中位数。 解题思路 我们使用离线算法。 既然这是一个一个输入&#xff0c;那么我们就用秘技时光倒流之数。先把所有数加入进去&#x…

[北京微软技术直通车]前端 Visual Studio Code 开发 Angular 与亿级 SQL Servern

微软技术直通车第一期将于2017年9月9日与大家见面&#xff0c;本次邀请华北区微软技术专家和大家一起交流前端工具与技术&#xff0c; Visual Studio Code&#xff0c;TypeScript 与 Anuglar 项目开发和亿级数据库运维的最佳实践&#xff0c;分享相关技术的发展前景和从业经验&…

vue中如何实现全全全屏和退出全屏?

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂”最近总有人给我说ta有社恐&#xff0c;明明是有社牛好不好……前言在做大屏界面的时候&#xff0c;客户有个要求&#xff0c;一进去登录成功之后&#xff0c;要有全屏的功能&#xff0c;…

Spring MVC请求url无效问题思考

一、Controller没有配置 page not found or method not supported. 没有扫描到包里面的controller类 <context:component-scan base-package"com.mk.controller" /> 二、请求方式GET/POST org.springframework.web.servlet.PageNotFound noHandlerFound No…

P1160-队列安排【链表】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP1160 题目大意 有nn个人,编号是1&#x223C;n" role="presentation">1∼n1∼n&#xff0c;然后开始时插入第一个人&#xff0c;之后每次可以插入到一个人的左边或右边&#xff0…

【深圳】掌通宝科技有限公司技术总监(兼架构师),约吗

技术总监&#xff08;兼架构师&#xff09; 岗位职责&#xff1a; 1、主持研发中心日常管理工作&#xff0c;负责公司O2O平台,SaaS平台管理&#xff1b; 2、负责公司.net后台&#xff0c;Android客户端、IOS客户端、WEB平台等架构设计&#xff1b; 4、解决开发中的技术问题…

树层级处理上万条数据优化!

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。”前言项目中&#xff0c;部门数超万&#xff0c;导致页面加载价卡顿怎么办&#xff1f;使用若依自带解析树的方法在本地运行没有任何问题&#xff0c;但是一发布到服务器上就显示加载超…

Idea Tomcat启动报异常CannotLoadBeanClassException

一、现象展现 Idea配置占用了C磁盘的所有空间&#xff0c;删除Idea配置目录后&#xff0c;改为D磁盘存储Idea配置。 由于idea的Artifact&#xff08;war explode包&#xff09;在没有整个项目重新构建情况下没有执行热发布&#xff0c;从而删除Artifact的war和war explode包&…

P3435-[POI2006]OKR-Periods of Words【KMP】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP3435 大意 一个字符串&#xff0c;对于每个前缀&#xff0c;求复制一份放在末尾可以覆盖整个前缀的前缀&#xff0c;求所有的长度和。 解题思路 这道题如果暴力的话很简单&#xff0c;对于每个前缀每…

Orleans解决并发之痛(三):集群

Orleans本身的设计是一个分布式的框架&#xff0c;多个Silo构成集群&#xff0c;Grains分布在多个Silo中。一旦一个Silo挂了&#xff0c;原来归属这个Silo的Grains会自动在其他Silo中激活。生产环境下还是需要以集群方式来部署。 cluster 在Orleans解决并发之痛&#xff08;二…

avue中实现消息的实时展示

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。”前言一个功能写了大半天&#xff0c;主要是数据表设计的有点复杂&#xff0c;且这个项目是10月份就写的放那的&#xff0c;里面有些东西都忘记了……先看数据库结构&#xff0c;然后理…

org.apache.ibatis.builder.BuilderException: Could not find value method on SQL annotation

转载自 mybatis 注解引发的bug&#xff0c;org.apache.ibatis.builder.BuilderException: Could not find value method on SQL anno Mybatis用注解开发且还用script标签 这种bug&#xff0c;网上一搜一大堆&#xff0c;但是都xml方式开发&#xff0c;大部分说的是返回类型或…

P2375-[NOI2014]动物园【KMP,字符串】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP2375 题目大意 对于kmp操作&#xff0c;我们多求一个numnum数组&#xff0c;表示对于字符串SS的前i" role="presentation">ii个字符构成的子串&#xff0c;既是它的后缀同时又是它…

发达国家与发展中国家编程语言技术的分布差异性

近日&#xff0c;Stack Overflow在官方博客上发布了一组统计数据&#xff0c;表明发达国家与发展中国家在编程语言技术的采用上存在较大的差异。Stack Overflow对2017年1月至8月期间的访问数据进行了分析&#xff0c;选取了64个技术标签&#xff0c;每个标签所包含问题的访问次…

两个map中的数据,按照相同键,将所对应的值相加方法

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂”前言最近写代码的时候遇到了个需求&#xff0c;刚开始想的时候&#xff0c;感觉不难&#xff0c;挺简单的&#xff0c;结果写的时候&#xff0c;各种思考、各种费脑&#xff0c;耗费了点…