el-autocomplete

【Vue】el-autocomplete禁用时仍会触发下拉的问题

文章目录问题解决问题el-autocomplete禁用时，点击后仍会触发下拉，导致出现bug解决试了一下官方disabled属性、@focus、@click.stop均不起作用，最后无奈只能在查询方法那里做处理
益达是我·2024-08-22 11:01

element的el-autocomplete组件的使用（模糊匹配、自定义模板、远程搜索）

一、代码实现激活即列出输入建议输入后匹配输入建议自定义模板{{item.value}}{{item.address}}远程搜索exportdefault{name:'AutoComplete',data(){return{restaurants:[],state1:'',state2:'',state3:'',state4:'',};},mounted(){this.restaurants=thi
小白_ysf·2024-01-19 11:30

element UI带输入建议输入框el-autocomplete点击回车下拉框不消失问题

问题描述点击回车(或者自己定义的icon图标）不能收起建议框解决当建议框的内容为空的时候建议框会自己收起search(){//把suggestions置空this.$refs.autocomplete.suggestions=[];}问题已解决，在点击回车和icon搜索图标时会收起建议框
杜蜜月·2024-01-11 09:58

el-autocomplete远程搜索使用及el-upload上传多个文件流给后端，详情接口返回的是文件地址，前端将文件地址转成文件流，回传文件流给后端

最近遇到一个项目，里面有2个需求我觉得挺常见的，第一个需求是一个表单里，当用户在输入名称后，前端调接口发请求获取到关联名称的企业名称，并展示，然后当用户选中企业后，前端调接口获取选中企业的具体信息，并填充到表单里；第二个需求是，表单里有个上传图片的功能，前端需要在用户点击保存的时候，前端调保存接口将文件流随表单数据一起以formData格式传给后端存起来，如下图，用户在名称输入框输入“武汉”两个字
百思不得小李·2024-01-04 11:44

el-autocomplete与el-badge组合badge不更新

应用场景根据模糊搜索选择的值来判断该公司是否为会员公司，并在输入框右上角显示会员/非会员模糊查询选择后右上角动态显示会员/非会员出现的问题当我在搜索框输入的值刚好和我选择的值一样时，例如下面选择了过后，右上角不显示标志我原来的代码template中script中看似是没有问题的对吧。select事件检测用户是否选择了公司，如果选择了就把该选项附带的信息赋值给addInfo，然后动态渲染badge标
午安້໌ᮨ·2023-12-31 00:42

vue element远程搜索下拉框出tooltip el-autocomplete下拉框出省略号时鼠标移上去出提示

@[TOC](vueelement远程搜索下拉框出tooltipel-autocomplete下拉框出省略号时鼠标移上去出提示)需求如下1.element远程搜索框下下拉框文字超出宽度后会出省略号要求鼠标移上去能够出文字效果图如下el-autocomplete.gif对el-tooltip进行了二次封装{{text}}exportdefault{name:'EllipsisTooltip',pro
yeyue1992·2023-12-29 13:42

封装第三方组件（24）给element-plus 的表单子控件增加一个防抖的功能

element-pluselement-plus功能非常强大，但是好像只有el-autocomplete提供了一个防抖功能，其他表单子控件并没有提供防抖功能，而el-autocomplete的防抖和我想要的效果又不太一样
自然框架·2023-12-19 14:30

vue element远程搜索下拉框出tooltip el-autocomplete下拉框出省略号时鼠标移上去出提示

vueelement远程搜索下拉框出tooltipel-autocomplete下拉框出省略号时鼠标移上去出提示需求如下效果图如下对el-tooltip进行了二次封装组件使用需求如下1.element远程搜索框下下拉框文字超出宽度后会出省略号要求鼠标移上去能够出文字效果图如下对el-tooltip进行了二次封装{{text}}exportdefault{name:'EllipsisTooltip'
yeyue1992·2023-12-02 15:45

el-autocomplete设置下拉框横向滑动条

el-autocompleteelement文本输入框+下拉框，和el-select有相似之处1、优点：可以实现选中或者输入选项后，input框第二次点击后的回显，而select选择器组件不能实现回显(这里的回显指，选中之后第二次点击会显示地存在上次所选择的，而不是变成灰色的隐式存在，主要方便用户在原有地基础上面进行修改)2、下拉框内容过长，如何设置横向的滑动条为css属性设置如下属性即可/dee
起风了~~~~·2023-11-28 18:37

element el-autocomplete模糊搜索，点击clearable清空后，再输入下拉框不显示

el-autocomplete组件在执行清除事件时，将activated置为了false。当querySearch执行成功，activated仍为false，所以下拉框不显示。
杜蜜月·2023-11-20 14:37

解决el-autocomplete组件远程搜索的区间匹配问题

el-autocomplete是element中一个常用的组件，用于实现输入框自动完成的功能。然而，它的默认配置在远程搜索时存在一个问题：无法进行区间匹配。
余道各努力，千里自同风·2023-10-26 07:19

Element-UI之＜el-autocomplete＞标签在输入框输入匹配不到下拉列表中内容

功能需求：查到另一张表的“姓名”字段，在输入框下有下拉框可以输入，自动匹配下拉列表中的字段鼠标点击在输入框，下拉列表出现实现使用Element-UI前端模板，之“自定义模板”标签复制到代码中后，在输入框输入“三”之后，下拉列表中不能匹配到下拉框中字段解决过滤方法中,这里是===0，indexOf（）方法是返回包含的位置，并不是存在===0，不存在===-1restaurant.crewName.i
Ethan0396·2023-10-12 01:52

解决element-plus el-autocomplete点击清空按钮，再输入内容下拉框不显示问题。

当前使用[email protected][email protected],封装的el-autocomplete组件使用的vue2的写法。
塞风·2023-09-25 18:16

解决el-autocomplete组件远程搜索的区间匹配问题

前言el-autocomplete是element中一个常用的组件，用于实现输入框自动完成的功能。然而，它的默认配置在远程搜索时存在一个问题：无法进行区间匹配。
水星记_·2023-09-18 23:02

vue-tabel 中使用 el-autocomplete 出现的问题

必须加:popper-append-to-body="false":popper-class="vxetableignoreclear"我自己用的话缺一不可说一下我自己项目中遇到的问题吧，我写的是表格中套表格，会出现就是当下拉选的时候用@selete是可以用的，但是用@blur也可以触发，但是仅限于失去焦点点在表格内才会触发，在其他地方是不会触发的我查了一下原因Element-UIel-selec
可雯的小宝贝儿·2023-09-13 08:48

VUE input 失去焦点

search(e){//el-autocomplete收起建议列表this.$refs.input.activated=false;this.
H愚公移山H·2023-09-03 01:21

el-autocomplete 的使用

querySearch(queryString,cb){varrestaurants=this.projectOptions;varresults=queryString?restaurants.filter(this.createFilter(queryString)):restaurants;//调用callback返回建议列表的数据cb(results);},createFilter(que
摇摇奶昔x·2023-08-29 03:56

修复el-autocomplete组件监听change返回值始终是输入框的值而非选中的“输入建议”值

修复el-autocomplete组件监听change返回值始终是输入框的值而非选中的“输入建议”值需求问题环境重现代码原因解决方案发现问题终极方案剧终需求用户是在输入框输入值后模糊搜索某旅客表姓名输入框需要在失焦后校验输入值的姓名格式问题模拟用户点击模糊匹配的旅客姓名列表后提示格式错误环境项目
weixin_42309175·2023-08-18 05:02

关于elementui的input的autocomplete的使用

项目中需要实现搜索框搜索时能自动提示可选项的功能，elementui的input组件有已经封装好的el-autocomplete可以使用，但是在使用中发现一些问题，记录一下基础使用//html部分//js
笑毅·2023-08-15 11:22

自动补全输入框-el-autocomplete

第一次使用记录{{item.value}}{{item.label}}interfaceLinkItem{value:stringlabel:string}letconfig=reactive({basicList:[{label:'Timmy',value:'000001.SH'},{label:'Judd',value:'2'},{label:'Dequan',value:'3'},{labe
北里新妆·2023-08-04 17:37

23年5月工作笔记整理（前端）

前端学习一、故障排查1.遇到文件加载404的情况，检查一下vue.config.js里的publicPath路径2.vue2引入外部方法时，在html使用要封装一层方法，不然会报没有使用过的错误3.解决el-autocomplete
wj_秦桑低绿枝·2023-08-01 16:47

AI生成-- autocomplete 模糊搜索

el-autocomplete可以通过设置属性来实现模糊搜索功能。首先需要设置一个搜索函数，即在输入框输入内容时会调用的函数，用来返回所有符合条件的结果。
我兔威武·2023-07-28 13:25

可编辑的下拉框

el-autocomplete可编辑的下拉框options1:[{value:'1111',label:'1111',},{value:'222',label:'222',}],methods：querySearch3
Ybittersweet·2023-07-18 21:45

【element】el-autocomplete的常见用法

前言：这段时间突然发现很少写博客了，平时都在平衡工作和休息的时间，周末也没动过笔，而且更重要的是我找不到写的内容了，在经历的初始的新知识的学习阶段后，目前的阶段更加转入对于业务的理解，很多模块在不同项目中都是可以复用的。而且工作中发现开发并不强求特别酷炫的界面效果，更多的是实用的数据展示，因此button，form，table可以说是最常用的，因此后面可能会用更多的篇幅去说这块内容的知识。一、组件
糯米w·2023-07-18 10:39

ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）

今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。
流浪码农~·2023-07-16 11:55

ElementUi el-autocomplete 使用clearable属性,点击清除重新输入提示不显示

点击清除按钮后，重新输入querySearchAsync有执行,也有返回值，但提示不显示。光标移到别处点击再回来有时又正常。文档中，clearable是input的属性，Autocomplete没有，clear事件是否影响cb()方法执行？（没找到cb()方法的文档以及源码）处理方式：通过反复测试对比发现，点击清除重新输入时input没有失去焦点，这个问题会导致再次输入时没有聚焦，所以出现不显示的
希文Gershwin·2023-06-20 21:30

el-autocomplete 带输入建议搜索框使用方法

今天学习一下如何使用vue2elementUI中的el-input中的带输入建议搜索框：el-autocomplete1.先看下官网是怎么讲的：里面的queryString就是你在input框中输入的字符串；cb()方法是固定写法；2.el-autocomplete实战使用：html部分：js部分：//站线列表数据asyncquerySearch(queryString,cd){console.l
nav-item·2023-04-11 23:25

在elementUI中使用 el-autocomplete 实现远程搜索的下拉框

image.png在template中添加标签在script中添加下面两个函数//queryString为在框中输入的值//callback回调函数,将处理好的数据推回querySearchAsync(queryString,callback){varlist=[{}];//调用的后台接口leturl=后台接口地址+queryString;//从后台获取到对象数组axios.get(url).th
氨基钠·2023-04-05 11:13

element中el-autocomplete的常见用法示例

目录前言：一、组件介绍二、基本原理三、具体实现【后端实现法】四、源码总结前言：这段时间突然发现很少写博客了，平时都在平衡工作和休息的时间，周末也没动过笔，而且更重要的是我找不到写的内容了，在经历的初始的新知识的学习阶段后，目前的阶段更加转入对于业务的理解，很多模块在不同项目中都是可以复用的。而且工作中发现开发并不强求特别酷炫的界面效果，更多的是实用的数据展示，因此button，form，table
·2023-03-30 10:58

vue+Element-ui input 远程搜索+模糊查询的实现（el-autocomplete）

文章目录前言template中的内容data部分method部分mybatis前言在本次项目中，需要完成根据用户输入学院的名称进行远程搜索的需求，刚开始使用的是官网上的形式，聚焦时拿到全部数据放到数组,然后当用户输入文字时循环该数组,将匹配的筛选出来,但是有些数据量太大了,几万条,考虑到性能问题,就由后台做模糊搜索,前端只需请求接口即可,后台返回匹配的数据.template中的内容data部分ac
Bruce1801·2023-03-25 10:40

vue中el-autocomplete支持分页上拉加载功能

目录el-autocomplete使用template实现需求分析1.输入框为空时聚焦或失焦后又重新聚焦不会触发请求数据接口2.缓存上一次已查询的数据&搜索条件：blurArr、blurTxt3.滚动加载指令
·2022-11-24 00:49

Vue + ElementUI+ el-autocomplete 组件的防抖方案的懒加载

#Vue+ElementUI+el-autocomplete组件的防抖方案的懒加载在项目开发中，经常会使用到下拉选择框，为了更快捷所以有了autocomplete的出现，autocomplete是一个可带输入建议的输入框组件，该组件在数据量大的情况下能通过输入快速的查找到对应的选项。通过Element-UI的官网文档的示例可知，其通过输入数据从而自动查找且显示对应的数据。当数据量大的时候，此时加载
小小前端程序猿·2022-09-13 22:32

vue中el-autocomplete与el-select的异同

目录前言异同el-autocompleteel-select总结前言最近项目里面需要使用到下拉框的远程搜索，我这边使用的是el-select，其实查看文档我们可以得知，还可以使用el-autocomplete
·2022-05-29 12:46

element带输入建议el-autocomplete的使用

目录引用el-autocomplete触发带输入建议的两种方式转成输入建议回调的数据结构增加回车触发事件解决回车后建议输入框没消失的bugvue+elementUIelementUI的带输入建议官方文档
·2022-04-06 17:11

vue对el-autocomplete二次封装增加下拉分页

成为公共组件3.可能需要解释的项目中的联想输入框现在都是采用的el-autocomplete实现的，但是随着数据量越来越多，产品要求一次不要返回所有的联想数据，要做分页处理，所以需要添加一个分页的功能。
·2022-03-09 11:58

龙马ui组件库 lm-ui-element

lm-ui-elementlm-ui-element适用于vue项目，大部分组件基于element-ui，并整合其他插件，如lm-address地址选择组件整合了element-ui的el-input、el-autocomplete
东扯葫芦西扯瓜·2022-02-20 00:41

el-autocomplete 的使用

效果图业务场景需要根据用户输入关键词模糊匹配进行提醒进而选择查询。后端口代码controll层@PreAuthorize("@ss.hasPermi('system:qymp:list')")@GetMapping("/getNsrmc")publicAjaxResultgetNsrmc(){List>nsrmcAndValue=sysQympService.getNsrmc();returnAj
·2022-02-07 15:44

el-autocomplete的使用及clearable清除按钮功能失效及fetch-suggestions传递多个参数问题

本文记录一下el-autocomplete的使用和两个常见的问题需求分析假设我们有这样的一个需求：当用户在输入框中输入内容后，呈现关联建议可选项信息，以供用户选择.比如用户输入了“王”这个字，那么要呈现关于
·2021-08-03 09:52

el-select / el-autocomplete下拉列表

el-selectfilterable属性模糊搜索功能//下拉框展示，左侧显示姓名，右侧显示手机号{{item.patientName}}{{item.patientPhone}}:filter-method绑定filter方法它会在输入值发生变化时调用，参数为当前输入值。searchPsrAddEnquiryVo(patientName){this.psrAddEnquiryVoUser.pag
琳媚儿·2021-05-16 23:45

Element-ui的el-autocomplete的使用

el-autocomplete的简单使用及遇到的坑//使用methods:{setBlur(){//在点击由clearable属性生成的清空按钮时，主动触发失去焦点，解决‘fetch-suggestions
渣一窝·2021-03-10 13:14

Element-ui 自带的两种远程搜索(模糊查询)用法讲解

饿了么自带两种方式可以做，一种是使用el-input中的el-autocomplete，另一种是使用el-select和el-option。这两种都可以选择，但是具体实现的思路方式要和后端商量。
·2021-01-29 13:43

饿了么ui自带的两种远程搜索（模糊查询）用法讲解

饿了么自带两种方式可以做，一种是使用el-input中的el-autocomplete，另一种是使用el-select和el-option。这两种都可以选择，但是具体实现的思路方式要和后端商量。
·2021-01-27 01:50

饿了么ui自带的两种远程搜索（模糊查询）用法讲解

饿了么自带两种方式可以做，一种是使用el-input中的el-autocomplete，另一种是使用el-select和el-option。这两种都可以选择，但是具体实现的思路方式要和后端商量。
·2021-01-27 01:07

el-autocomplete使用clearable,点击清除触发事件与重新输入值提示不显示问题

1.点击清除触发事件@input我是判断搜索值为空时做后续操作2.重新输入值提示不显示解决办法是设置一个ref='elautocomplete'，然后执行querySearch()方法的时候执行this.$refs.elautocomplete.activated=true||this.$refs.elautocomplete.handleFocus()方法，解决的核心思路就是想办法把this.$
wjh777·2020-08-24 17:39

vue element ui el-autocomplete模糊查询功能

文本框获取焦点的时候发送请求，拿回来数据，想搜索数据中的某个值，直接搜索功能，效果图如下：代码如下:注意一点：el-autocomplete中数组值的结构必须是{value:'值'}js:watch:{
心向阳光，便是晴天·2020-08-23 21:49

Vue-----element框架中，可输入下拉框（el-select和el-autocomplete对比）

需求：需要一个即可选择也可输入的输入框,且需要自定义模板（输入视频源url时，其名称也需展示）。考虑到element有两种组件可实现，那么就来对比一下这两种实现：el-select的实现比较简单，参考element的官网：https://element.eleme.io/#/zh-CN/component/select只需加filterableallow-create即可完成此需求，且有clear
VIVI Xiao·2020-08-19 06:13

关于element里边的el-autocomplete自动获取焦点

关于element里边的el-autocomplete自动获取焦点这个组件真的是很坑的，在文档里边有这个方法，但是一用起来就是就知道多坑看了文档我是直接这么写的（test是组件中ref的属性值），结果控制台就报错了搞了半天
MissΛ·2020-08-18 06:57

element el-autocomplete 不渲染的深坑....

项目中，需求要求在input框中输入之后进行联想，我决定使用elementui的input中的这个组件当我凭着我不甚灵光的脑袋终于想明白了这段代码的意思的时候，出现了一个让我不知所措的问题，我发现联想搜索的值在输入框中显示不出来…我以为自己过滤的有问题，但是返回值是有的。检查html发现条数对，但是里面没有值…想到差点气死自己之后，去问了厉害的同事，同事说他怀疑是因为element的demo中绑定
吃饱再多吃两口·2020-08-18 01:00

el-input获取焦点 input输入框为空时高亮 el-input值非法时

问题重述前端主要框架为Vue.js，在页面使用组件库element-ui的el-input、el-select、el-autocomplete等元件时，想要在表单验证为空时，使空值的元件获取焦点高亮。
weixin_33827965·2020-08-15 16:35

betterscroll使用总结

需要高度比wrapper大，content是wrapper唯一的子节点所有需要滚动的元素列表放入content中2、使用betterscroll以后，某些输入型元素事件失效以elememt-ui的组件el-autocomplete
little_kid_pea·2020-08-13 15:45
上一页 1 2 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他