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(() => {})
    },
相关推荐
Jonathan Star1 小时前
沉浸式雨天海岸:用A-Frame打造WebXR互动场景
前端·javascript
工业甲酰苯胺2 小时前
实现 json path 来评估函数式解析器的损耗
java·前端·json
老前端的功夫2 小时前
Web应用的永生之术:PWA落地与实践深度指南
java·开发语言·前端·javascript·css·node.js
LilySesy2 小时前
ABAP+WHERE字段长度不一致报错解决
java·前端·javascript·bug·sap·abap·alv
Wang's Blog3 小时前
前端FAQ: Vue 3 与 Vue 2 相⽐有哪些重要的改进?
前端·javascript·vue.js
再希3 小时前
React+Tailwind CSS+Shadcn UI
前端·react.js·ui
用户47949283569154 小时前
JavaScript 的 NaN !== NaN 之谜:从 CPU 指令到 IEEE 754 标准的完整解密
前端·javascript
群联云防护小杜4 小时前
国产化环境下 Web 应用如何满足等保 2.0?从 Nginx 配置到 AI 防护实战
运维·前端·nginx
ss2734 小时前
Springboot + vue 医院管理系统
vue.js·spring boot·后端
醉方休4 小时前
Web3.js 全面解析
前端·javascript·electron