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(() => {})
    },
相关推荐
我叫黑大帅15 小时前
解决聊天页内部滚轮改为页面滚动问题
javascript·后端·面试
郑洁文16 小时前
基于Python的Web命令执行漏洞自动化检测系统
前端·python·网络安全·自动化
新酱爱学习16 小时前
手搓 10 个 Skill 后,我把重复劳动收敛成了一套零依赖 CLI 工具
前端·javascript·人工智能
罗超驿16 小时前
13.JavaScript 新手入门指南:语法、变量、流程控制全解析
开发语言·javascript
IT_陈寒16 小时前
Python的线程池居然把我坑在了垃圾回收这块
前端·人工智能·后端
ct97817 小时前
Three.js 性能优化(测量-定位-优化)
javascript·性能优化·three
研☆香17 小时前
es6新特性功能介绍(一)
前端·ecmascript·es6
陈_杨17 小时前
鸿蒙开发-疾阅App阅读训练功能技术解析
前端·javascript
zhangxingchao17 小时前
AI应用开发八:RAG相关技术总结
前端·人工智能·后端