场景描述:一个业务开关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修改状态之前判断 - 简书 

Logo

前往低代码交流专区

更多推荐