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

【Element】el-switch开关 点击弹窗确认框时状态先改变----点击弹窗取消框失效

一、背景

需求:在列表中添加定期出账的开关按钮,点击开关时,原来的状态不改变,弹出弹窗;点击弹窗取消按钮:状态不改变,点击弹窗确定按钮:状态改变,并调取列表数据刷新页面

二、具体实现

使用element  el-switch开关,具体用法可查看官方指引

官网指引:Element - The world's most popular Vue UI framework

<template slot-scope="scope"><el-switch@change="openSwitch($event, scope.row)"v-model="scope.row.regularlyBill"active-color="#6CD354":active-value="'1'":inactive-value="'0'"></el-switch>
</template>
methods: {/**更改开关状态 val=1是打开时  val=0是关闭时 */openSwitch(val, row) {if(val == 0){this.$Remind({title:'关闭之后,自动出账将失效,但仍可进行手工操作出账,确定要关闭吗?'}).then(()=>{this.isLoading = true;this.changeResultBill(row) //调取接口更改开关状态})}else{this.$Remind({title:'确定要开启自动定期出账吗?'}).then(()=>{this.isLoading = true;this.changeResultBill(row) //调取接口更改开关状态})}},//修改开关状态changeResultBill(row){let params = {id:row.id,regularlyBill:row.regularlyBill}this.$http.post(this.$url.lifebill.updateRegularlyBill,params).then(res=>{this.isLoading = false;if(res.code == 0){this.$message.success(res.msg)this.getDateTemplatePage(); //调取列表接口刷新页面}})},
}

备注: 

①this.$Remind是自定义封装的弹窗,弹窗组件在element上也有,具体选择按需求为主

②v-model:是数据绑定值,实现数据双向绑定;active-color:switch 打开时的背景色;active-value:switch 打开时的值;inactive-value:switch 关闭时的值

三、效果展示

四、踩坑记录

4.1、问题描述

问题1:点击打开或关闭按钮,弹窗还未点击确定,开关的状态已经先改变了

问题2:点击弹窗取消按钮,开关状态也是变化后的状态,开关状态应不改变

4.2、原因分析并解决

原因:v-model 实现数据双向绑定,点击开关时状态就实时发生变化

解决:将v-model改成:value="",再赋值即可。调取更改开关状态的接口时也传递状态值

4.3、更改后的代码

<template slot-scope="scope">
<!-- 更改前 v-model="scope.row.regularlyBill" --><el-switch@change="openSwitch($event, scope.row)"v-model="scope.row.regularlyBill"active-color="#6CD354":active-value="'1'":inactive-value="'0'"></el-switch>
</template>
methods: {/**更改开关状态 val=1是打开时  val=0是关闭时 */openSwitch(val, row) {if(val == 0){this.$Remind({title:'关闭之后,自动出账将失效,但仍可进行手工操作出账,确定要关闭吗?'}).then(()=>{this.isLoading = true;//this.changeResultBill(row) //更改前--调取接口更改开关状态this.changeResultBill(val,row) //更改后--调取接口更改开关状态,并传入开关状态的值}).catch(()=>{this.$message.error("取消了关闭操作"); //增加了取消按钮的弹窗提示})}else{this.$Remind({title:'确定要开启自动定期出账吗?'}).then(()=>{this.isLoading = true;//this.changeResultBill(row) //更改前--调取接口更改开关状态this.changeResultBill(val,row) //更改后--调取接口更改开关状态,并传入开关状态的值}).catch(()=>{this.$message.error("取消了开启操作"); //增加了取消按钮的弹窗提示})}},//修改开关状态changeResultBill(val,row){let params = {id:row.id,//regularlyBill:row.regularlyBill //更改前regularlyBill:val //更改后}this.$http.post(this.$url.lifebill.updateRegularlyBill,params).then(res=>{this.isLoading = false;if(res.code == 0){this.$message.success(res.msg)this.getDateTemplatePage(); //调取列表接口刷新页面}})},
}

4.4、bug修复后的效果

最终:

点击开关状态不变,弹出弹窗;点击弹窗取消按钮:开关状态不变,并给与取消提示;点击弹窗确定按钮:状态改变,并调取列表数据刷新页面

 最后:👏👏 😀😀😀 👍👍 

相关文章:

【Element】el-switch开关 点击弹窗确认框时状态先改变----点击弹窗取消框失效

一、背景 需求&#xff1a;在列表中添加定期出账的开关按钮&#xff0c;点击开关时&#xff0c;原来的状态不改变&#xff0c;弹出弹窗&#xff1b;点击弹窗取消按钮&#xff1a;状态不改变&#xff0c;点击弹窗确定按钮&#xff1a;状态改变&#xff0c;并调取列表数据刷新页…...

Java 中最常用的设计模式之一,工厂模式模式的写法,

文章目录 工厂模式1、简单工厂模式2、工厂模式3、抽象工厂4、总结 工厂模式 工厂模式是 Java 中最常用的设计模式之一&#xff0c;工厂模式模式的写法有好几种&#xff0c;这里主要介绍三种&#xff1a;简单工厂模式、工厂模式、抽象工厂模式 1、简单工厂模式 这里以制造cof…...

HTML的学习

知己知彼百战不殆 打算学习一下javascript 所以先从基础的html语言开始 其实就是头部 和身体 头部控制整个 html的语言 title等 <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"width…...

JS设计模式 — 行为委托

回顾一下原型&#xff0c;发现[[Prototype]]机制就是指对象中的一个内部链接引用另一个对象&#xff0c;这个机制的本质就是对象之间的关联关系 1、面相委托的设计 Task {setID: function(ID) { this.id ID; },outputID: function() { console.log( this.id ); } }; // 让 …...

Microsoft Expression Web - 网页布局

在本章中&#xff0c;我们将介绍网页的基本布局。在创建我们的网页布局之前&#xff0c;我们需要考虑我们的内容&#xff0c;然后设计我们希望如何呈现该内容&#xff0c;因为它是在我们的网站上可见的内容。 由我们如何呈现我们的内容&#xff0c;以便我们的观众找到我们的网…...

Java SpringBoot Controller常见写法

文章目录 环境Controller调用脚本运行结果总结 环境 系统: windows 11 工具: java, idea, git bash Controller 接口常见有以下几种方式 其中&#xff1a; Tobj 调用脚本 我的是windows 系统&#xff0c;使用 git bash 窗口运行, 用 cmd 或者 power shell 会有问题 curl …...

【驱动】SPI驱动分析(五)-模拟SPI驱动

简介 模拟SPI驱动是一种软件实现的SPI总线驱动。在没有硬件SPI控制器的系统中&#xff0c;通过软件模拟实现SPI总线的功能。它允许在不修改硬件的情况下&#xff0c;通过GPIO&#xff08;通用输入/输出&#xff09;引脚模拟SPI总线的通信&#xff0c;从而与SPI设备进行数据交换…...

人工智能_机器学习056_拉格朗日乘子法原理推导_公式由来详解_原理详解---人工智能工作笔记0096

https://blog.csdn.net/Soft_Po/article/details/118332454 这里有老师的一篇文章介绍拉格朗日乘子法的原理推导 结合老师的这篇文章我们来看一下详细的推导过程 可以看到上一节我们说,一个有条件的,函数,可以转换为一个,无条件的函数, 根据拉格朗日乘子法,可以创建出一个等…...

记RocketMQ本地开发环境搭建始末

前言 最近工作中涉及到了RocketMQ的应用&#xff0c;为方便开发决定本地搭建一套RocketMQ的使用环境。 果然实践是个好东西... VMware虚拟环境搭建 这个网上有很多教程&#xff0c;只会比我写的详细有条理&#xff0c;这里就不在赘述了。 虚拟机搭建好之后每次重启电脑都无…...

2023年全国职业院校技能大赛“ 信息安全管理与评估” 测试题2

一.单选题 1、下列不属于口令安全威胁的是&#xff1f;&#xff08; &#xff09; A、 弱口令 B、 明文传输 C、 MD5 加密 D、 多账户共用一个密码 2、在学校或单位如果发现自己的计算机感染了病毒,应首先采取什么措施 ( )。 A、断开网络 B、告知领导 C、杀毒 D、重…...

flutter开发实战-readmore长文本展开和收缩控件

flutter开发实战-readmore长文本展开和收缩控件 当长文本展开和收缩控件&#xff0c;我们需要使用readmore来处理长文本展开和收缩&#xff0c;方便阅读 一、引入readmore 在工程的pubspec.yaml中引入插件 readmore: ^2.1.0ReadMoreText的属性如下 const ReadMoreText(this.…...

如何使用简单的分支策略来保护您的 Git 项目

良好的分支策略可以使项目源代码获得一致且安全的数据&#xff0c;所有协作者可以在更短的生命周期内共享和访问这些数据。 您必须以灵活的方式设计项目模型&#xff0c;以便对所有成员角色和权限进行良好的管理。 我要谈论的并没有什么令人惊讶的新鲜事。您可能已经知道一些…...

vue3的 nextTick()的使用

引言&#xff1a; 当你修改了响应式状态时&#xff0c;DOM 会被自动更新。但是需要注意的是&#xff0c;DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改&#xff0c;以确保不管你进行了多少次状态修改&#xff0c;每个组件都只会被更新一次。 要等待…...

Redis Lua沙盒绕过 命令执行(CVE-2022-0543)漏洞复现

Redis Lua沙盒绕过 命令执行(CVE-2022-0543)漏洞复现 Redis如果在没有开启认证的情况下&#xff0c;可以导致任意用户在可以访问目标服务器的情况下未授权访问Redis以及读取Redis的数据。–那么这也就是redis未授权访问了 Redis的默认端口是6379 可以用空间测绘搜索&#xff…...

react中useState、useRef、变量之间的区别

函数组件有函数作用域&#xff0c;每次render时&#xff0c;声明的方法会生成新的引用&#xff0c;声明的普通变量会重新声明并赋值初始值&#xff0c;而useRef和useState会保留状态。 useState、useRef、变量的区别 1. useState 组件更新不会改变之前的状态&#xff0c;可以保…...

企业软件的分类|app小程序网站定制开发

企业软件的分类|app小程序网站定制开发 企业软件是指为满足企业管理和运营需求而设计和开发的一类软件&#xff0c;它通常用于支持企业的各项业务活动和流程。根据其功能和应用领域的不同&#xff0c;可以将企业软件分为以下几类。 1. 企业资源计划&#xff08;ERP&#xff09…...

Flink(八)【窗口】

前言 终于忙完了四门专业课的期末&#xff0c;确实挺累啊。今天开始继续学习 Flink &#xff0c;接着上次的内容。 今日摘录&#xff1a; 他觉得一个人奋斗更轻松自在。跟没有干劲的人在一起厮混&#xff0c;只会徒增压力。 -《解忧杂货店》 1、窗口 之前我们已经了解了…...

云轴科技ZStack信创云平台助力国泰君安期货实现信创改造

信创是数字中国建设的重要组成部分&#xff0c;也是数字经济发展的关键推动力量。作为云基础软件企业&#xff0c;云轴科技ZStack 产品矩阵全面覆盖数据中心云基础设施&#xff0c;ZStack信创云首批通过可信云《一云多芯IaaS平台能力要求》先进级&#xff0c;是其中唯一兼容四种…...

C语言猜数字小游戏

本文将介绍如何使用C语言写一个猜数字的小游戏 具体代码如下&#xff1a; #include<stdio.h> #include<stdlib.h> #include<time.h>// 显示游戏菜单 void menu() {printf("**** 猜数字游戏! ****\n");printf("**** 按1开始游戏 ****\…...

自定义BeanPostProcessor之XssBeanPostProcessor

什么是BeanPostProcessor BeanPostProcessor是Spring框架中的一个重要的扩展点&#xff0c;它允许开发者在Bean初始化前后对Bean进行自定义处理。Spring中有很多内置的BeanPostProcessor&#xff0c;如AutowiredAnnotationBeanPostProcessor、CommonAnnotationBeanPostProcess…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...