当前位置: 首页 > 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…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...