element-ui的el-switch在修改值之前做二次确认操作

最新推荐文章于 2025-07-14 21:43:16 发布

原创最新推荐文章于 2025-07-14 21:43:16 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章介绍了如何在Vue组件中使用el-switch时，通过改变`balanceCheck`的状态并在用户点击时提供友好的提示对话框，以提升用户体验。通过取反当前状态并在确认对话框中显示相应的文字，使切换过程更为直观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

       如果你直接就在

        <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呢，你点击时值其实已经改了为了让页面上看起来没有变化进行取反

 switchChange (e, row) {
      row.balanceCheck = !row.balanceCheck
      let str = !e? `关闭`: `开启`

      this.$confirm(str, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
        ...自定义的一些操作
          this.$message.success('操作成功！')
        })
        .catch(() => {})
    },