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(() => {})
    },
相关推荐
刘发财3 小时前
弃用html2pdf.js,这个html转pdf方案能力是它的几十倍
前端·javascript·github
牛奶6 小时前
2026年大模型怎么选?前端人实用对比
前端·人工智能·ai编程
牛奶6 小时前
前端人为什么要学AI?
前端·人工智能·ai编程
Kagol8 小时前
🎉OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用!
前端·开源·agent
GIS之路9 小时前
ArcGIS Pro 中的 notebook 初识
前端
JavaGuide10 小时前
7 道 RAG 基础概念知识点/面试题总结
前端·后端
ssshooter10 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
格砸11 小时前
从入门到辞职|从ChatGPT到OpenClaw,跟上智能时代的进化
前端·人工智能·后端
Live0000011 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉11 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化