element-ui的el-switch在修改值之前做二次确认操作

javascript 复制代码
       如果你直接就在

        <el-switch
          v-model="row.balanceCheck"
          active-color="#13ce66"
          inactive-color="#EAECF0"
          @change="switchChange($event, row)"
        >
        </el-switch>
   
       switchChange (e, row) {
          this.$confirm('是否修改?').then((event) => {      
          })
        }

原来的值是这样的

点击按钮后 这不够友好


解决方案如下

这里面的e呢, 你点击时值其实已经改了 为了让页面上看起来没有变化 进行取反

javascript 复制代码
 switchChange (e, row) {
      row.balanceCheck = !row.balanceCheck
      let str = !e? `关闭`: `开启`

      this.$confirm(str, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
        ...自定义的一些操作
          this.$message.success('操作成功!')
        })
        .catch(() => {})
    },
相关推荐
人机888号4 分钟前
instanceof 的小秘密
javascript
轻语呢喃4 分钟前
时间分片思想:多数据的前端处理方法
前端·javascript·面试
Spider_Man5 分钟前
假装渲染十万条,虚拟列表的障眼法你学会了吗?
前端·javascript·react.js
计算机程序员小杨5 分钟前
计算机毕设选题:电子商务供应链大数据分析系统Python+Django技术实现详解|毕设|计算机毕设|程序开发|项目实战
java·vue.js·python
3345543210 分钟前
vue实现表格轮播
javascript·vue.js·ecmascript
IT_陈寒16 分钟前
Vite 3.0 性能飞跃的5个关键优化点,让构建速度提升200%!
前端·人工智能·后端
赵民勇19 分钟前
npm使用的环境变量及其用法
前端·npm·node.js
i小杨1 小时前
Mac 开发环境与配置操作速查表
前端·chrome
陈随易1 小时前
改变世界的编程语言MoonBit:背景知识速览
前端·后端·程序员
狂奔solar2 小时前
使用Rag 命中用户feedback提升triage agent 准确率
java·前端·prompt