vue element ui 使用switch修改狀態之前判斷

結構部分

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

邏輯部分

changeStatus(callback, row) {
  let text = ''
  if (callback == 1) {
    text = '開啟'
    row.enable = 0
  } else {
    text = '關閉'
    row.enable = 1
  }
  this.$confirm(`是否變更狀態為${text}`, '提示', {
    confirmButtonText: '確定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    let message = ''
    if (row.enable == 0) {
      row.enable = 1
      message = '開啟成功'
    } else {
      row.enable = 0
      message = '關閉成功'
    }
    // 邏輯操作
    this.$message({
      type: 'success',
      message
    })
  })
}

文章來源：https://www.jianshu.com/p/8cb963838677