avue 中使用el-autocomplete，验证失效的问题

最新推荐文章于 2023-08-17 22:48:54 发布
最新推荐文章于 2023-08-17 22:48:54 发布
阅读量1.5k 收藏 2
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43817049/article/details/123837380
版权

如图

明明已经选择值了，但是验证失效 ，

原因在与事件触发的顺序

是先触发blur后select 所以在blur 事件里值是空的，因此就会触发验证

解决办法就是触发验证回调写在select里

在option里写规则

然后写一个handleSelect方法，在select 事件时，可以拿到想要的值(row.userName)

重点是在select方法里找到validator

 当然，如果一直都不会触发select方法，那就不能对数据进行判空了，因此在handleBlur也要写多一次验证

还有一些小细节，根据自己的需求改吧。

 

qq_43817049
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-autocomplete 必填校验问题
神膘护体小月半的博客
09-13 1049
【代码】el-autocomplete 必填校验问题。
知识点总结:element远程下拉搜索el-autocompleted的自动补全使用方法和注意事项
webfullstack的博客
11-12 4767
注意事项 使用时需要注意cb(list)函数里面list的格式,必须存在的是value值 代码 <el-autocomplete v-model="formCust.custCellphnNo" class="width-200" @keyup.enter.native="checkTel" @change="checkTel" :fetch-suggestions="q...
使用el-autocomplete做校验时，点击选择完选项还是会提示报错信息
weixin_45618937的博客
11-28 1317
使用el-autocomplete做校验时，点击选择完选项还是会提示报错信息
autocomplete设置只可以选择下拉选，mustMatch属性使用
sayoko06的博客
05-17 3938
        最初只添加了mustMatch属性，但是不起作用，查资料查到添加change事件，可以使用，如下代码，其实这时候mustMatch还是没有起作用，只有change事件起作用，没有找到mustMatch对应方法，不过使用如下的change事件也可以实现我们的需求：如果不从下拉选中选择就清空输入框。 $("#autocomplete").autocomplete({ source:...
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
小太阳的博客
10-21 9285
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
使用el-select组件时change事件和blur事件执行顺序问题
weixin_50774086的博客
08-17 2951
使用elementUI的select组件时，遇到的js事件执行顺序问题。 change事件和blur事件的执行顺序：blur > change
基于Vue el-autocomplete 实现类似百度搜索框功能
10-16
本文通过代码给大家介绍了Vue el-autocomplete 实现类似百度搜索框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
12-13
官网的demo献上 在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据 官网中的数据list都是写在loadAll...在template中添加el-autocomplete <el-autocomplete placeholder="请输入studentID" v-mo
google-autocomplete：Google自动完成Vue组件
02-04
尽管使用Vue.js编写了演示，但可以从任何JS框架提取Autocomplete对象。 要求 您将必须安装Vue＆Vuemit： npm install vue -- save npm install vuemit -- save 用于管理google组件与其父组件之间的事件。 注意...
vue element组件库， el-autocomplete组件修改 （后台搜索/下拉加载）
m0_37656425的博客
09-02 5845
** vue element组件库， el-autocomplete组件修改 （后台搜索/下拉加载） ** 前提： element组件库功能很强大， 但是在实际项目中， 我们会发现， element只能满足 大部分需求，对于少数需求， 用element满足不了， 自写呢，浪费时间， 这个时候就需要我们丰富element-ui了。 1：在使用 element，过程中， 我们要多思，多想。 “瞻...
Avue 远程搜索输入框，联动赋值其他组件 v2.7.10及以下
qq_44140499的博客
05-08 5091
文章目录《 Avue 远程搜索输入框，联动赋值》前言一、基于avue自带属性实现（效果差）二、基于element-ui实现（效果好）总结 《 Avue 远程搜索输入框，联动赋值》 效果图： 前言 在很大情况下需要联动赋值给输入框，本文基于avue框架分别从avue与element-ui两方面进行远程搜索输入框联动赋值给其他输入框。 需求 1、后台接受模糊查询参数，从 编码 字段的输入值进行后台模糊匹配并返回json数据。（接口已经实现，传值调用即可） 2、根据 编码 的选择，将数据行自带的值匹配到
elementUI 下拉选择框 无法验证问题
weixin_42596624的博客
07-11 1032
elementUI 下拉选择框 无法验证问题
elementui组件el-autocomplete 联想搜索
小猫爪子
02-02 1409
autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。 使用之前建议参考官方文档 input根据输入内容提供对应的输入建议https://element.eleme.cn/#/zh-CN/component/input 使用组件遇到的问题输入建议回调的数据结构增加回车触发
vue开发中遇到的问题（文章过长，建议ctrl+F搜索关键字）
qq_43238125的博客
12-15 3965
一些在前端开发中比较零散的问题
element中组件el-autocomplete远程搜索之精确匹配和模糊匹配
热门推荐
H-L的博客
05-30 1万+
在实际开发项目中总是会遇到很多难以预测的情况，比如el-autocomplete的远程搜索时，经常会从服务器发起搜索，然后把对象带出的相关值赋给其他标签元素，一般模糊匹配没问题，但是精确匹配会存在一个问题（当从服务器获取到对象的值赋给其他元素时，dom元素不能及时更新问题）以上页面需要通过搜索维特号然后带出相关的项目名称和梯号以及注册代码，因为这里维特号需要精确匹配，就会出现不能及时更新的问题，具...
vue+element UI带输入建议的输入框el-autocomplete
云中客的博客
12-06 1万+
     之前做的项目中使用了element的选择器，然而由于选项太多不好找就更换为带输入建议的输入框 但我们接口要求并非是传入公司名称，而是传入这个注册公司的id，后端传入的数据结构经过转换后大致是这样的： companyList = [ { company_id: 1, comopany_name: '腾讯' }, { company_id: 2, comopany_...
修复el-autocomplete组件监听change返回值始终是输入框的值而非选中的“输入建议”值
diu拿星的博客
12-21 4007
修复el-autocomplete组件change监听返回值始终是输入框的值而非选中的“输入建议”值。获取autocomplete组件实例，给input子组件添加change事件监听 给autocomplete组件创建观察函数和自定义事件 1: 用户选择了输入建议：监听到select事件，移除观察函数，触发change事件并返回正确的值 2: 输入框失焦suggestions组件关闭：观察到autocomplete组件里的suggestions子组件的showPopper变化，移除观察函数，触发change
VUE/AVUE每次打开弹框自动聚焦功能
杨雪枫的博客
12-20 2012
先来效果图 需求: 因为要对接读卡器，每次打开弹框都要点击卡号再把卡放上去，比较麻烦，所以想办法优化了一下 avue代码 html js
vue3el-form中使用el-autocomplete
最新发布
04-09
在Vue 3中使用Element UI的el-autocomplete组件可以通过以下步骤实现： 1. 首先，确保你已经安装了Element UI和Vue 3的相关依赖。 2. 在你的Vue组件中，引入el-autocomplete组件和相关的样式： ```javascript import { ElAutocomplete } from 'element-plus'; import 'element-plus/lib/theme-chalk/el-autocomplete.css'; ``` 3. 在template中使用el-autocomplete组件，并绑定相关的属性和事件： ```html <template> <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入关键词" @select="handleSelect" ></el-autocomplete> </template> ``` 4. 在data中定义value属性，并实现querySearch方法和handleSelect方法： ```javascript export default { data() { return { value: '', }; }, methods: { querySearch(queryString, cb) { // 根据输入的queryString进行搜索，获取匹配的建议列表 // 将建议列表通过cb回调函数返回 }, handleSelect(item) { // 处理选中某个建议项的逻辑 }, }, }; ``` 5. 在querySearch方法中，根据输入的queryString进行搜索，并将匹配的建议列表通过cb回调函数返回。你可以使用异步请求或者本地数据来实现搜索逻辑。 6. 在handleSelect方法中，处理选中某个建议项的逻辑。你可以根据选中的项进行相应的操作，比如更新value的值或者执行其他操作。 这样，你就可以在Vue 3中使用el-autocomplete组件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值