element UI的带输入建议el-autocomplete总结(详细,全)
Table of Contents
引用el-autocomplete
触发带输入建议的两种方式
转成输入建议回调的数据结构
增加回车触发事件
解决回车后建议输入框没消失的bug
vue+element UI
element UI的带输入建议官方文档:https://element.eleme.cn/#/zh-CN/component/input
建议先看官方文档,这里是官方文档的适当补充
引用el-autocomplete
1、在需要的地方引用
<el-autocompleteclass="inline-input"v-model="inputValue":fetch-suggestions="querySearch"placeholder="请输入内容"@select="handleSubmit"></el-autocomplete>
v-model="inputValue" :与inputValue绑定值,也就是说,自动输入建议的值可以通过inputValue拿到。
:fetch-suggestions="querySearch" : 返回输入建议的方法,也就是说输入框一获取焦点。就会自动调用该方法拿到数据,这些数据就是输入建议的数据。
@select="handleSelect" : 当选中建议项时,调用该方法。
2 、
<script>
export default {name: "searchBar",//allInfos是父组件传来的值,如果allInfos不是父组件传来的就不用这样写props: ["allInfos"],data() {return {inputValue: "",};},methods: {handleSubmit() {//根据自身情况//该方法是提交时触发},//输入框获取焦点时调用的方法querySearch(queryString, cb) {//allInfos是怎么来,是从父组件传过来的还是在自己组件调用api接口拿到的还是其他//我这里的allInfos是从父组件传过来的,在这里也举例子组件从父组件传值let results = this.allInfos;results = queryString? results.filter(this.createFilter(queryString)): results;//cb是回调函数,返回筛选出的结果数据到输入框下面的输入列表cb(results);},//该方法仿写官方文档,如果没有特别的需求,该方法改动不大//这是当输入数据时触发的,筛选出和输入数据匹配的建议输入。//我这里用的是调用match方法,是模糊匹配;官方调用的是indexOf,是精确匹配,看自身情况选择createFilter(queryString) {return (item) => {return item.value.toUpperCase().match(queryString.toUpperCase());};},},
};
</script>
触发带输入建议的两种方式
- 1.输入框获取焦点时就触发
这是默认的
- 2.输入值后匹配触发
在组件上加上:trigger-on-focus="false"
<el-autocompleteclass="inline-input"v-model="inputValue":fetch-suggestions="querySearch":trigger-on-focus="false"placeholder="请输入内容"@select="handleSubmit"></el-autocomplete>
转成输入建议回调的数据结构
大家也看到了文档里面,回调的数据结果,是一个数组,数组的每一项是一个对象,对象里一定要有一个value的属性,这些是必须的。如果数据结构不长这样,那么待输入建议的数据是无法渲染出来的。
[{ "value": "xxx(在输入建议看到的值,必需)", "address": "看自身情况" },
]
那么问题来了,如果拿出来的数据不是这样结构,该怎么办?以我的情况举个例子。
我拿到的数据是这样的,虽然也是数组,但是数组里的对象属性不一样。
this.modelInfos=
[{ "modelId": "1", "modelName": "a1",type:"c" },{ "modelId": "2", "modelName": "a2",type:"c" },{ "modelId": "3", "modelName": "a3",type:"c" },{ "modelId": "4", "modelName": "a4",type:"c" },
]
用map返回想要的数据结构。
this.allInfos= this.modelInfos.map((terminal) => {return {value: modelName,name: modelId,};});
可以log打印一下,就会发现allInfos的结构就变成了想要的亚子。
增加回车触发事件
在组件里增加 @keyup.enter.native方法
<el-autocompleteclass="inline-input"v-model="inputValue":fetch-suggestions="querySearch":trigger-on-focus="false"placeholder="请输入内容"@select="handleSubmit"@keyup.enter.native="handleSubmit"></el-autocomplete>
解决回车后建议输入框没消失的bug
如果增加了回车事件,那么输入数据回车后,输入建议框没有自动消失,该如何解决?
在组件又增加方法:@input(在输入值发生改变的时候触发changeStyle方法)
@keyup(按键松开触发的事件,也就是回车时触发changeStyle方法)
传入的“block”是让输入框建议展开,'.el-autocomplete-suggestion'是输入建议框的类名
<el-autocompleteclass="inline-input"v-model="inputValue":fetch-suggestions="querySearch":trigger-on-focus="false"placeholder="请输入内容"@select="handleSubmit"@keyup.enter.native="handleSubmit"@input="changeStyle('block', '.el-autocomplete-suggestion')"@keyup="changeStyle('block', '.el-autocomplete-suggestion')"></el-autocomplete>
//根据传进来的状态改变建议输入框的状态(展开|隐藏)changeStyle(status, className) {let dom = document.querySelectorAll(className);dom[0].style.display = status;},
在handleSubmit的时候调用changeStyle方法,传入的状态为none(表示让输入建议框隐藏)
handleSubmit() {this.changeStyle("none", ".el-autocomplete-suggestion"); },
element UI的带输入建议el-autocomplete总结(详细,全)相关推荐
- element UI el-autocomplete 带输入建议的输入框
项目需求:需要用户在输入框中输入公司 全名 但是为了避免用户输入不全 需要做一个带输入建议的输入框 element组件: el-autocomplete class="inline ...
- element ui 使用container布局时,容器布满全屏
element ui 使用container布局时,容器布满全屏 在使用element ui 布局时,容器一直不能不满全局.在网上搜索了下.解决方法如下: 将包裹container的容器加入一下样式: ...
- element ui 组件踩坑记录--后台管理系统-最全
说明:很久没有开发过后台管理系统,elementui都好久没有用过了,踩了一些小坑,特意记录下: element 特点:a.组件的一般输入的值/可以选择的值,都是绑定在v-model 上面 b. 在组 ...
- 解决element ui 使用container布局时,容器布满全屏
我们在使用官方的代码时,一般是无法直接布满屏幕的. 很显然,这不是我们想要的效果,我们要把它布满全屏 解决代码如下: 实现效果:
- Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
- 从Element ui看开发公共组件的三种方式
在日常的开发工作中,封装自己的公共组件是很常见的需求,但想要组件更加优雅和通用也是一门学问.恰好前段时间用过Element ui,于是想学习这种库是如何封装插件的,这篇文章就是我的一点理解. 从入口文 ...
- element ui字段_ui备忘单下拉字段
element ui字段 重点 (Top highlight) Dropdowns get a lot of flak from the UI world – and if we are honest ...
- Element UI 组件库分析和二次开发(一)
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
最新文章
- 新型攻击接踵而来 思科Talos解析Jaff勒索软件
- php对应哪个oracle版本,Oracle 版本说明
- CTF入门--http请求头
- [密码学基础][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第37篇]The Number Field Sieve
- 阿里云飞天洛神2.0:高性能网络软硬一体化技术实践
- Python二级笔记(4)
- 线上FullGC频繁的排查
- 关于shell读取文件打印时展开通配符
- 信号(signal)
- GNU Linux系统变量(sysctl配置命令)综合使用
- 大物实验-直接测量量不确定度计算器 开发备忘录
- H5商城在微信APP里支付
- javascript中map和filter的区别
- 【动手学深度学习】李沐——卷积神经网络
- 【长篇博文】Docker学习笔记与深度学习环境的搭建和部署(二)
- 第七届高教杯计算机绘图,第七届”高教杯“全国大学生先进成图技术与产品信息建模创新大赛 机械类 计算机绘图试卷...
- Simple Calculator 1.0(有声计算器)
- BZOJ 3426 CodeChef/CHANGE
- 人脸识别损失函数梳理与分析/相关方法整理
- 程序员应对35岁中年危机的措施