当前位置：首页 > news >正文

【elementui】解决el-select组件失去焦点blur事件每次获取的是上一次选中值的问题

news 2025/8/26 14:05:59

【问题描述】

【问题摘要】

【分析问题】

【完整Test代码】

【封装自定义指令】

↑↑↑↑↑↑↑↑↑↑↑↑ 不想看解决问题过程的可点击上方【封装自定义指令】目录直接跳转获取结果即可~~~

【问题描述】

一位朋友遇到这么一个开发场景：在表格里面嵌入el-select组件，每次修改值后，失去焦点时将修改值提交后台保存，但是发现在el-select组件失去焦点时，blur事件的evt.target.value值总为前一次选择的值；

【问题摘要】

1、el-select组件失去焦点时需要获取组件当前值而不是上一次的值；

2、el-select组件切换选项时不提交后台，只有当组件失去焦点后才提交当前值；

【分析问题】

一刚开始以为是下拉框收起动画延时问题导致内部value值被延时修改，所以就在blur事件里延时获取evt.target.value,貌似没问题了

blurHandler(evt){setTimeout(() => {console.log(evt.target.value);},250)
},

随后又发现通过@blur绑定事件只会触发一次，好吧那就加修饰符吧：@blur.capture.native，好像解决只触发一次的问题了

<el-select v-model="value" @blur.capture.native="nativeBlurHandler" ref="select"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option>
</el-select>

但是随之而来的问题就是，每次切换取值后都会触发一次blur事件，这可不是我们想要的，这不变成change事件了吗？继续深挖！

那就打印一下this.$refs.select看看吧，找到this.$refs.select.$data, 看里面有定义啥变量没,发现了如下变量：

log(eventName){let {createdSelected,inputHovering,isOnComposition,isSilentBlur,menuVisibleOnFocus,softFocus,visible} = this.$refs.select.$data;console.table([{name: eventName,value: '',},// {// 	name: 'createdSelected',// 	value: createdSelected// },{name: 'inputHovering',value: inputHovering},// {// 	name: 'isOnComposition',// 	value: isOnComposition// },{name: 'isSilentBlur',value: isSilentBlur},// {// 	name: 'menuVisibleOnFocus',// 	value: menuVisibleOnFocus// },// {// 	name: 'softFocus',// 	value: softFocus// },{name: 'visible',value: visible},])
}

通过反复测试发现只有inputHovering，isSilentBlur，visible这三个变量与el-select组件的focus,blur事件有关联：

通过上图可以发现，只有最下方的失去焦点事件才是我们想要的，此时visible==false，isSilentBlur==true,正好满足我们的判断条件,于是blur事件改造成这样了：

nativeBlurHandler(evt){console.log('nativeBlurHandler', {...this.$refs.select});let {isSilentBlur,visible} = this.$refs.select;if( isSilentBlur  && !visible ) {console.log('提交', this.$refs.select.selected.currentValue);}this.log('blur事件');
},

又因为value取值从evt.target.value获取的不是实时的，也就是值不正确，继续深挖，发现this.$refs.select.selected.currentValue就是我们想要的正确的值，于是乎，问题就解决了！测试demo完整代码如下：

【完整Test代码】

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-select v-model="value" placeholder="请选择" @blur="blurHandler" @blur.capture.native="nativeBlurHandler" ref="select"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></div></body><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>let selectElm;new Vue({el: '#app',data: function() {return {options: [{value: '黄金糕',label: '黄金糕'}, {value: '双皮奶',label: '双皮奶'}, {value: '蚵仔煎',label: '蚵仔煎'}, {value: '龙须面',label: '龙须面'}, {value: '北京烤鸭',label: '北京烤鸭'}],value: ''}},methods: {focusHandler(evt){this.log('focus事件');},blurHandler(evt){setTimeout(() => {console.log(evt.target.value);},250)},nativeBlurHandler(evt){console.log('nativeBlurHandler', {...this.$refs.select});let {isSilentBlur,visible} = this.$refs.select;if( isSilentBlur && !visible ) {console.log('提交', this.$refs.select.selected.currentValue);}this.log('blur事件');},log(eventName){let {createdSelected,inputHovering,isOnComposition,isSilentBlur,menuVisibleOnFocus,softFocus,visible} = this.$refs.select.$data;console.table([{name: eventName,value: '',},// {// 	name: 'createdSelected',// 	value: createdSelected// },{name: 'inputHovering',value: inputHovering},// {// 	name: 'isOnComposition',// 	value: isOnComposition// },{name: 'isSilentBlur',value: isSilentBlur},// {// 	name: 'menuVisibleOnFocus',// 	value: menuVisibleOnFocus// },// {// 	name: 'softFocus',// 	value: softFocus// },{name: 'visible',value: visible},])}}})</script>
</html>

【封装自定义指令】

想到给组件添加ref实际并不是那么好用且麻烦，所以我又将其封装成了指令，指令代码及用法如下，大家随取随用哈↓↓↓↓↓↓

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-row><el-col :span="24"><el-select v-select-blur="selectBlurHandler" v-model="value"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-col></el-row></div></body><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>Vue.directive('select-blur', {bind: function(el, binding, vnode) {const selectComponent = vnode.componentInstance;if( selectComponent.$options.name === 'ElSelect' ) {selectComponent.$watch('visible', (n,o) => {const {isSilentBlur,visible,} = selectComponent;if(isSilentBlur && !visible) {selectComponent.handleBlur();}})selectComponent.$on('blur', () => {let {visible,selected: {currentValue}} = selectComponent;if (!visible) {binding?.value && typeof binding.value === 'function' && binding.value(currentValue);selectComponent.blur();    //处理页面频繁聚焦失焦导致重复触发blur事件的问题}}, true);}},unbind: function(el, binding, vnode) {const selectComponent = vnode.componentInstance;if( selectComponent.$options.name === 'ElSelect' ) {selectComponent.$off('blur');}}});const app = new Vue({el: '#app',data: function() {return {options: [{value: '黄金糕',label: '黄金糕'}, {value: '双皮奶',label: '双皮奶'}, {value: '蚵仔煎',label: '蚵仔煎'}, {value: '龙须面',label: '龙须面'}, {value: '北京烤鸭',label: '北京烤鸭'}],value: ''}},methods: {selectBlurHandler(val) {console.log('提交', val);},}})</script>
</html>

【elementui】解决el-select组件失去焦点blur事件每次获取的是上一次选中值的问题

目录【问题描述】【问题摘要】【分析问题】【完整Test代码】【封装自定义指令】 ↑↑↑↑↑↑↑↑↑↑↑↑ 不想看解决问题过程的可点击上方【封装自定义指令】目录直接跳转获取结果即可~~~ 【问题描述】一位朋友遇到这么一个开发场景：在表格里面嵌入el-…...

编程日记 2023/8/4 3:16:38

通过了PMP考试，还有什么证书值得考？

自从7月24号公布了PMP成绩后，不少伙伴私信小编：通过PMP后还有哪些证书可以提升自己？一来是多份高含金量的证书可以多点竞争力，二来是加持自己的职业发展！今天小编就来给大家捋一捋！ 一.NPDP认证 2016 年 4…...

编程日记 2023/8/4 3:15:36

页面技术基础-html

页面技术基础-html 环境准备：在JDBC中项目上完成代码定义 1. 新建一个 Module:filr->右键 -》Module -》Java-》next->名字(html_day1)->finish 2. 在 Moudle上右键-》第二个选项：add framework .. -> 选择JavaEE下第一个选项 Web Apllicat…...

编程日记 2023/8/4 3:13:33

/lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28‘ not found

某项目中，我要给别人封装一个深度学习算法的SDK接口，运行在RK3588平台上，然后客户给我的交叉编译工具链是然后我用他们给我的交叉编译工具链报下面的错误： aarch64-buildroot-linux-gnu-gcc --version /data/chw/aarch64/bin/cca…...

编程日记 2023/8/4 3:12:28

解决SVN或GIT忽略提交文件的问题

背景使用IDEA 的SVN插件提交文件是总是会提交一些不需要提交的文件; 我们可以通过一些简单设置忽略这些文件。 git 在项目根目录新建文本文件，修改后缀为.gitignore 文件中添加内容 *.iml .project .gradle/ .idea/ target/ build/ .vscode/ .settings/ .facto…...

编程日记 2023/8/4 3:11:27

Django框架之路由用法

简介路由简单的来说就是根据用户请求的 URL 链接来判断对应的处理程序，并返回处理结果，也就是 URL 与 Django 的视图建立映射关系。 Django 路由在 urls.py 配置，urls.py 中的每一条配置对应相应的处理方法。 Django 不同版本 urls.py 配…...

编程日记 2023/8/4 3:10:22

回文链表 LeetCode热题100

题目给你一个单链表的头节点 head ，请你判断该链表是否为回文链表。如果是，返回 true ；否则，返回 false 。思路利用快慢指针找到链表中间节点，反转后半段链表。前半段从头节点开始与后半段比较。注意当链表节点…...

编程日记 2023/8/4 3:09:20

如何在群晖NAS中使用cpolar内网穿透

如何在群晖nas中使用cpolar内网穿透文章目录如何在群晖nas中使用cpolar内网穿透今天，我们来为大家介绍，如何在群晖系统中，使用图形化界面的cpolar。 cpolar经过图形化改造后，使用方法已经简便了很多，基本与其他应用…...

编程日记 2023/8/4 3:08:18

无头单向不循环链表和带头双向循环链表的创建

Lei宝啊：个人主页愿所有美好不期而遇前言： 接下来我们将会了解最基础的链表--->单链表以及最方便也是最爽的链表--->带头双向循环链表。若有看不懂之处，可画图或者借鉴这里：反转单链表，对于数据结构而言&am…...

编程日记 2023/8/4 3:07:17

main.py from typing import Listfrom fastapi import FastAPI, WebSocket, WebSocketDisconnectapp FastAPI()class ConnectionManager:def __init__(self):# 存放激活的ws连接对象self.active_connections: List[WebSocket] []async def connect(self, ws: WebSocket):# 等…...

编程日记 2023/8/4 3:06:16

MySQL详解

目录一、MySQL 概述二、MySQL 安装和配置三、MySQL 基础语法四、MySQL 高级语法五、MySQL 性能优化六、MySQL 应用场景和实例七、MySQL 开发工具和插件八、MySQL 学习资源和社区一、MySQL 概述 MySQL 是一种开源的关系型数据库管理系统，最初由瑞典的 MySQL AB 公…...

编程日记 2023/8/4 3:05:10

Vue [Day2]

指令修饰符 v-model.trim v-model.number 事件名.stop click.stop 事件名.prevent keyup.enter <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…...

编程日记 2023/8/4 3:04:09

【前端｜Javascript第1篇】一文搞懂Javascript的基本语法

欢迎来到JavaScript的奇妙世界！作为前端开发的基石，JavaScript为网页增色不少，赋予了静态页面活力与交互性。如果你是一名前端小白，对编程一无所知，或者只是听说过JavaScript却从未涉足过，那么你来对了地方…...

编程日记 2023/8/4 3:03:07

【Linux命令200例】cp用于复制文件和目录（常用）

🏆作者简介，黑夜开发者，全栈领域新星创作者✌，阿里云社区专家博主，2023年6月csdn上海赛道top4。 🏆本文已收录于专栏：Linux命令大全。 🏆本专栏我们会通过具体的系统的命令讲解加上鲜…...

编程日记 2023/8/4 3:02:05

C高级_第二讲_shell指令和shell脚本_递归练习

思维导图递归实现，输入一个数，输出这个数的每一位 int funh(int num){if(0 num){return 0;}else{funh(num/10);printf("%d\n", num%10);} }int main(int argc, const char *argv[]) {puts("请输入一个数");int num 0;scanf(&quo…...

编程日记 2023/8/4 3:01:04

静态路由综合实验

实验拓扑如下： 实验要求如下： 【1】R6为isp，接口IP地址均为公有地址;该设备只能配置IP地址，之后不能再对其进行任何配置【2】R1~R5为局域网，私有IP地址192.168.1.0/24，请合理分配【3】所有路由器上环回…...

编程日记 2023/8/4 3:00:03

Spring核心IOC控制反转思想-----Spring框架

import org.junit.Test;public class TestPublic {Testpublic void Test(){//控制反转是一种思想,是为了提高程序扩展力降低耦合度,达到DIP(Dependency Inversion Principle依赖倒置)原则//其核心是将对象的创建权交出去,由第三方容器负责管理,将对象和对象之间的维护权交出去,…...

编程日记 2023/8/4 2:58:00

中小企业如何做好MES管理系统实施建设

中小企业在生产制造领域面临着诸多挑战，包括提升产品竞争力、规范生产制造等。为了应对这些挑战，越来越多的中小企业开始实施MES生产管理系统。然而，由于企业规模小、资源实力不足等原因，很多企业在实施MES管理系统时存在一定的困…...

编程日记 2023/8/4 2:56:58

java环境搭建 Ubuntu Linux

jdk的安装和配置环境变量使用apt sudo apt install default-jdk若是安装成功了在终端输入java -version来查看是否安装成功使用官网下载的jdk包直接在百度上搜索jdk，选择图片这个网址:jdk下载网址若是arm就选择带有arm的，反之选择x64的&#…...

编程日记 2023/8/4 2:55:57

微信小程序使用mp-html遇到的问题并解决

1、在本地配置寻找勾选使用npm 查了之后发现2023了不需要勾选了默认使用npm 2、在微信小程序编辑器左上角的工具-->构建npm 然后就报错了于是搜索到以下的内容： 没有找到可以构建的NPM包，请确认需要参与构建的npm都在 miniprogramRoot 目录内 -…...

编程日记 2023/8/4 2:54:56

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...

编程新知 2025/8/26 10:20:54