vue实现下拉列表远程搜索示例(根据关键词模糊搜索)
“
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂
”
前言
昨天的链接没有放上去……大家访问新站的时候,可以在浏览器地址栏中输入:www.穆雄雄.com或者www.muxiongxiong.cn都可以。
今天分享的效果如下:
说明
因为部门是全国所有的中心,所以有点多,原来采用的是下拉框来实现的,但是让客户从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>
官方解释是这样的,我觉得说的很明白了:
“
为了启用远程搜索,需要将
filterable
和remote
设置为true
,同时传入一个remote-method
。remote-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
中的代码,回头将这一块儿优化优化,因为在本地是没有问题的,问题只出现在服务器上,大家要是还有别的方法,或者建议,可以留言哈,采纳必有奖励~
vue实现下拉列表远程搜索示例(根据关键词模糊搜索)相关推荐
- vue + elemen可远程搜索select选择器的封装(思路及源码分享)
目录 项目场景: 效果 1.封装下拉列表 2.页面中使用 项目场景: 我有很多的Form表单,在Form表单内又有很多的select选择器,这些选择器的下拉列表都是通过后端的接口传回的数据渲染的,如果 ...
- Vue+Axios+ElementUI 远程搜索问题(返回promise对象问题)
声明下是刚学前端和后端,什么都不会,遇到到坑太多了 碰到的问题: 在学习Vue+Axios+ElementUI组合中,实验ElementUI远程返回列到问题,首先因为后端asp.net core ap ...
- H5 vue实现百度下拉列表交互操作示例
给大家分享一篇关于vue实现百度下拉列表交互操作示例的详细介绍,希望对同学们学习HTML5开发有所帮助,下面我们一起来看一下吧. www.jb51.net vue百度下拉列表 .gray{ backg ...
- vue+element实现Select 选择器的远程搜索、滚动加载
1.html结构: <el-selectv-model.trim="query.enEnterpriseBaseId"v-loadmore="loadMore&qu ...
- vue + iview + select + 本地搜索或远程搜索
案例 <template><div><!--1. 远程搜索 --><!-- filterable.remote.remote-method.loading.l ...
- vue+element表格 <el-select>远程搜索
为了启用远程搜索,需要将filterable和remote设置为true,同时传入一个remote-method.remote-method为一个Function,它会在输入值发生变化时调用,参数为当 ...
- 闲云旅游项目开发-(第四篇:机票首页/机票搜索功能(`el-autocomplete`远程搜索组件)/moment.js的使用/日期选择组件el-date-picker)
目录 相关组件介绍 一 机票首页布局 二 封装搜索组件 1. 组件布局 2.目标思路 3.步骤 3.1 基本功能 3.2 自动补全 3.3获取真正的推荐数据 3.4 添加城市代号 3.5 处理日期格式 ...
- python字典实现关键字检索_如何实现搜索框的关键词提示功能
我们都使用过主流的搜索引擎,谷歌. bing,当然还有搜狗.百度之类.当你搜索某一关键词时,它会贴心在下拉框补全一些热门关键词,像下图这样: 搜索关键词提示 你点击某一关键词,页面就直接跳转到结果页面 ...
- element 搜索匹配_如何在Element-ui中实现一个远程搜索功能
如何在Element-ui中实现一个远程搜索功能 发布时间:2021-01-29 14:50:00 来源:亿速云 阅读:87 作者:Leah 这篇文章给大家介绍如何在Element-ui中实现一个远程 ...
最新文章
- 提权巧用RAR.EXE
- android 入门-工序
- 修改表格字体颜色_CAD表格文字样式失灵?不,你错了
- boost::statechart模块实现使用正交状态和 state_downcast 查询正交区域的状态的测试程序
- 简单、有效、全面的Kubernetes监控方案
- A way to visualize mip levels
- Entity Framework 学习总结之三:架构组成介绍
- 利用 CocoaPods 服务器中的一个 RCE 漏洞,投毒数百万款app
- 腾讯 “绝悟”论文披露技术细节。
- 3 缓存文件写入失败_分布式缓存数据库一致性问题
- nginx apache tomcat 相关收藏
- CSS3 box-shadow 设置元素阴影、text-shadow 设置文本阴影
- 影音先锋 android下载地址,影音先锋安卓版下载
- short s1 = 1; s1 = s1 + 1;有错吗?short s1 = 1; s1 += 1;有错吗?
- WPF学习之绘图和动画
- Windows 连接了网络浏览器不能上网
- 垦丁小吃:一碗150元台币的芒果冰
- Remote table-valued function calls are not allowed.
- IBM X 3650 M3服务器RAID0设置
- 星际反作弊2.3for-win7-xp-win8-win10
热门文章
- [剑指offer]面试题17:合并两个排序的链表
- 《C++ Primer》7.3.2节练习
- [蓝桥杯2019初赛]迷宫-bfs+存储路径
- 蓝桥杯2015初赛-加法变乘法-枚举
- 工具类—KeyValuePair
- Cow Bowling POJ - 3176(基础的动态规划算法)
- hdu 6153 A Secret kmp + dp
- P3959 [NOIP2017 提高组] 宝藏
- 数据结构之基环树——骑士,Island,旅行加强版,Number of Simple Paths,Traffic Network in Numazu,Card Game
- CF650E-Clockwork Bomb【并查集】