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(() => {})
    },
相关推荐
江城开朗的豌豆4 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er9 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0612 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444014 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆15 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子18 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain925 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人36 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa
KaneLogger38 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
前端风云志1 小时前
JavaScript中如何遍历对象?
javascript