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(() => {})
    },
相关推荐
一 乐6 小时前
婚纱摄影网站|基于ssm + vue婚纱摄影网站系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·后端
C_心欲无痕7 小时前
ts - tsconfig.json配置讲解
linux·前端·ubuntu·typescript·json
清沫7 小时前
Claude Skills:Agent 能力扩展的新范式
前端·ai编程
yinuo7 小时前
前端跨页面通信终极指南:方案拆解、对比分析
前端
北辰alk7 小时前
Vue 模板引擎深度解析:基于 HTML 的声明式渲染
vue.js
北辰alk8 小时前
Vue 自定义指令完全指南:定义与应用场景详解
vue.js
yinuo8 小时前
前端跨页面通讯终极指南⑨:IndexedDB 用法全解析
前端
北辰alk8 小时前
Vue 动态路由完全指南:定义与参数获取详解
vue.js
北辰alk8 小时前
Vue Router 完全指南:作用与组件详解
vue.js
北辰alk8 小时前
Vue 中使用 this 的完整指南与注意事项
vue.js