vue elementUI el-switch在修改状态之前做判断，根据判断来确定是否修改状态

前端小鱼儿

于 2022-11-10 17:33:51 发布

阅读量2.8k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/xiaochuan11111111/article/details/127792856

版权

本文介绍了如何在Vue Element UI的switch组件中添加确认提示，确保在执行高风险操作（如关闭业务开关）前，用户能够确认他们的选择。通过`$confirm`方法显示警告对话框，只有在用户点击确定后才会执行状态变更，从而避免意外的操作。

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

场景描述：一个业务开关switch，关闭操作属于高危操作，所以关闭得时候给个弹框，询问是否真的要执行关闭操作。

<el-switch
    @change="changeStatus($event, obj)"
    active-color="#13ce66"
    v-model="obj.enable"
    :active-value="1"
    :inactive-value="0"
    inactive-color="#dadbdf"     
></el-switch>

changeStatus(callback, obj) {
  let text = ''
  if (callback == 1) {
    text = '开启'
    obj.enable = 0
  } else {
    text = '关闭'
    obj.enable = 1
  }
  this.$confirm(`是否变更状态为${text}`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    let message = ''
    if (row.obj== 0) {
      row.obj= 1
      message = '开启成功'
    } else {
      row.obj= 0
      message = '关闭成功'
    }
    // 调用点击确定按钮后得方法function

  })
}

参考：vue element ui 使用switch修改状态之前判断 - 简书