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(() => {})
    },
相关推荐
IT_陈寒2 分钟前
Python开发者必看:5个被低估但能提升200%编码效率的冷门库实战
前端·人工智能·后端
g***78917 分钟前
鸿蒙NEXT(五):鸿蒙版React Native架构浅析
android·前端·后端
q***718511 分钟前
Webpack、Vite区别知多少?
前端·webpack·node.js
千里念行客24018 分钟前
国产射频芯片“小巨人”昂瑞微今日招股 拟于12月5日进行申购
大数据·前端·人工智能·科技
你挚爱的强哥1 小时前
【sgSelectExportDocumentType】自定义组件:弹窗dialog选择导出文件格式word、pdf,支持配置图标和格式名称,触发导出事件
vue.js·pdf·word
小杨快跑~1 小时前
Vue 3 + Element Plus 表单校验
前端·javascript·vue.js·elementui
我叫张小白。2 小时前
Vue3监视系统全解析
前端·javascript·vue.js·前端框架·vue3
WYiQIU7 小时前
11月面了7.8家前端岗,兄弟们12月我先躺为敬...
前端·vue.js·react.js·面试·前端框架·飞书
谢尔登7 小时前
简单聊聊webpack摇树的原理
运维·前端·webpack
娃哈哈哈哈呀7 小时前
formData 传参 如何传数组
前端·javascript·vue.js