element-plus blur和select冲突失效导致移除焦点清空文本框内容失效解决方案

问题

需求是做一个查询企业的功能,期望必须进行选择后进行查询,如果用户自主输入并没有进行选择,失去焦点的时候清空文本框里面的内容,给el-autocomplete添加@blur事件后发现,在下拉没有出现之前快速失去焦点才能触发blur,下拉列表出现后,blur就失效了,这样就很难达到失去校验清空内容

解决方案

el-autocomplete添加chagne事件,每当文本框里面的内容改变了就清空v-model绑定的变量,代码如下

// 普通
<el-autocomplete 
	v-model="searCompanyName" 
	:fetch-suggestions="SearchCompany" 
    @change="changeCompany">
    <template #default="{ item }">
          {{item.companyName}}
     </template>
</el-autocomplete>

// 失焦清空
<el-autocomplete 
	v-model="searCompanyName" 
	:fetch-suggestions="SearchCompany" 
    @change="changeCompany(1)">
    <template #default="{ item }">
          {{item.companyName}}
     </template>
</el-autocomplete>


function changeCompany(type) {
    if(type === 1){
        state.searCompanyName = "";
    }
}

效果如下图
普通下的
在这里插入图片描述
失焦清空
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SuperGluePretrainedNetwork调用接口版本(两个版本!)

本脚本是一个基于Python的应用&#xff0c;旨在演示如何使用SuperGlue算法进行图像之间的特征匹配。SuperGlue是一个强大的特征匹配工具&#xff0c;能够在不同的图像之间找到对应的关键点。这个工具尤其适用于计算机视觉任务&#xff0c;如立体视觉、图像拼接、对象识别和追踪…

express操作mysql数据库的方法总结

作为前端&#xff0c;我们无需去考虑数据库的问题&#xff0c;业务场景需要的话&#xff0c;我们可以mock数据&#xff0c;满足暂时的联调场景。但是对于数据库&#xff0c;我们前端可以不用&#xff0c;却不能不了解不懂。所以这篇文章整理下&#xff0c;nodejs框架express中怎…

【通信原理笔记】【三】模拟信号调制——3.5 角度调制(FM、PM)与其频谱特性

文章目录 前言一、相位与频率二、PM和FM的数学表示三、FM的频谱四、FM信号的带宽——卡松公式总结 前言 在之前介绍的几种调制方式中&#xff0c;我提到信噪比时计算的是用户解调后的信噪比&#xff0c;然而在北邮通信原理课中考虑的是解调器输入的信噪比&#xff0c;即考虑的…

H-GAP: Humanoid Control with a Generalist Planner

ICLR 2024 paper Intro 本文方法研究利用大量人类动捕数据以及衍生的类人轨迹数据&#xff0c;基于MPC实现下游任务中机器人运动控制。 method H-GAP 的算法框架分为三个部分&#xff1a;基于VQ-VAE对状态动作序列的离散化&#xff0c;基于Transformer对latent code的先验…

爬虫 新闻网站 以湖南法治报为例(含详细注释,控制台版) V2.0 升级自定义查询关键词、时间段

目标网站&#xff1a;湖南法治报 爬取目的&#xff1a;为了获取某一地区更全面的在湖南法治报已发布的宣传新闻稿&#xff0c;同时也让自己的工作更便捷 环境&#xff1a;Pycharm2021&#xff0c;Python3.10&#xff0c; 安装的包&#xff1a;requests&#xff0c;csv&#xff…

uniapp 2.0可视化开发工具高级事件使用技巧探索

摘要 随着移动应用市场的不断扩大和前端技术的飞速发展&#xff0c;开发者们对于快速、高效构建跨平台应用的需求日益增强。uniapp作为一款优秀的跨平台应用开发框架&#xff0c;凭借其强大的功能和易用的特性&#xff0c;赢得了广大开发者的青睐。在uniapp 2.0版本中&#xf…

基于SpringBoot + Vue实现的在线答疑系统设计与实现+毕业论文+答辩PPT

介绍 学生角色&#xff1a; 1.注册、登录功能&#xff1a;学生可以通过系统完成注册和登录操作&#xff0c;进入学生专属界面。 2.个人信息修改功能&#xff1a;学生可以查看和修改自己的个人信息&#xff0c;包括姓名、联系方式等。 3.问题发布功能&#xff1a;学生可以在线发…

TypeScript—详解、小案例(配合源代码)

简介&#xff1a;TypeScript是微软开发的 JavaScript 的超集&#xff0c;TypeScript兼容JavaScript&#xff0c;可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括&#xff1a;加入注释&#xff0c;让编译器理解所支持的对象和函数&#xff0c;编译器…

水位实时监测系统的工作原理

TH-SW3水位实时监测系统有多种应用场景&#xff0c;包括但不限于防汛、水文地质勘察、水资源管理等领域。例如&#xff0c;雷达水位监测站利用雷达微波技术进行水位测量&#xff0c;适用于河流、湖泊、水库等水域;积水监测站则主要使用在低洼地区&#xff0c;为城市内涝治理提供…

机场数据治理系列介绍(5)民用机场智慧能源系统评价体系设计

目录 一、背景 二、体系设计 1、评价体系设计维度 2、评价体系相关约定 3、评价指标体系框架设计 4、能源利用评价指标 5、环境友好评价指标 6、智慧管控评价指标 7、安全保障评价指标 三、具体落地措施 一、背景 在“双碳”国策之下&#xff0c;各类机场将能源系统建…

LeetCode110:平衡二叉树

题目描述 给定一个二叉树&#xff0c;判断它是否是 平衡二叉树 解题思想 使用递归依次计算左子树的高度和右子树的高度 代码 class Solution { public:int height(TreeNode* node) {if (node nullptr) return 0;int leftT height(node->left);if (leftT -1) return -1;…

外包干了17天,技术倒退明显

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落&#xff01; 而我已经在一个企业干了四年的功能…

大模型训练:如何解决GPU万卡互联挑战?

如何解决GPU万卡互联的挑战 近日&#xff0c;字节跳动携手北京大学研究团队发布重磅论文&#xff0c;揭示了一项革命性技术&#xff1a;将大型语言模型训练扩展至超10,000块GPU的生产系统。此系统不仅解决了万卡集群训练大模型时的效率和稳定性难题&#xff0c;更标志着人工智能…

蓝桥2021A组D题

路径 问题描述格式输入格式输出评测用例规模与约定解析参考程序难度等级 问题描述 格式输入 无 格式输出 最短路径长度 评测用例规模与约定 无 解析 看到最短路径想到使用最短路算法不了解最短路算法请看最短路算法 然后本题的题意是节点编号差值大于21就没有边相连&#…

【Java多线程】案例(1):设计模式

目录 一、什么是设计模式&#xff1f; 二、单例模式 1. 饿汉模式 2. 懒汉模式 懒汉模式-第一次改进 懒汉模式-第二次改进 懒汉模式-第三次改进 一、什么是设计模式&#xff1f; 设计模式是针对软件设计中常见问题的通用解决方案。它们提供了一种被广泛接受的方法来解决…

Java的jmap命令使用详解

jmap命令简介 jmap&#xff08;Java Virtual Machine Memory Map&#xff09;是JDK提供的一个可以生成Java虚拟机的堆转储快照dump文件的命令行工具。 以外&#xff0c;jmap命令还可以查看finalize执行队列、Java堆和方法区的详细信息&#xff0c;比如空间使用率、当前使用的…

【智能优化算法】粘液霉菌算法(SMA):一种随机优化的新方法

粘液霉菌算法&#xff08;SMA&#xff09;是一种基于自然界中粘菌振荡模式的强大种群优化器。2020年4月&#xff0c;SMA的研究发表在著名的Future Generation Computer Systems (FGCS)杂志(中科院二区期刊)上。 01.引言 SMA 具有独特的数学模型和极具竞争力的结果&#xff0c;…

grpc-教程(golang版)

目录 一、介绍 二、环境准备 三、Golang中使用grpc 1.编写protobuf文件 2.服务端 3.客户端 四、proto文件详解 1.proto语法 2.数据类型 基本数据类型 数组类型 map类型 嵌套类型 编写风格 3.多服务 4.多个proto文件 五、流式传输 1.普通rpc 2.服务器流式 …

从零开始学习的ai教程视频,如何入手?

个人认为小白想零基础学习ai应该从理论和实操两个方面入手。理论是支撑实践的前提&#xff0c;只有以一种全局观角度了解ai才能实现从熟练使用ai到有自我意识的用ai创作。 接下来将会简单介绍一些理论免费学习网站和软件&#xff08;一笔带过&#xff0c;不重点&#xff09;&a…

构造析构理解与拷贝函数初识

1. 6个默认成员函数 ----初始化和清理{ 1.构造 2.析构 } -----拷贝复制{ 1.拷贝构造 2.赋值重载 } ------取地址重载{ 1.普通对象 2.const对象取地址 } 注&#xff1a;构造函数的目的是初始…