el-switch 点击按钮先弹窗提示点击确认后再改变状态值

代码1：

<!-- table表格 -->

<el-table :data="tableData">

  <el-table-column label="是否关闭" align="center">

  　　<template slot-scope="scope">

         <el-switch

            v-model="scope.row.showState"

            active-color="#52C4CD"

            inactive-color="#DCDFE6"

            @change="showClose(scope.$index, scope.row)"

            :active-value="true"

            :inactive-value="false"

         ></el-switch>

     </template>

  </el-table-column>

</el-table>

 

代码2：

//是否关闭

    showClose(index,row){

      let flag = row.showState //保存点击之后v-modeld的值(true，false)

      row.showState = !row.showState //保持switch点击前的状态

      this.$confirm(title, '提示', {

　　　　　　confirmButtonText: '确定',

　　　　　　cancelButtonText: '取消',

　　　　　　type: 'warning'

      }).then(() => {

          flag ?  row.showState = true : row.showState = false // 这一步很重要，row.showState会根据flag的值开启或关闭开关

          this.$message({type: 'success', message: '修改成功!'})

      }).catch(() => {

          this.$message({type:'info',showClose: true,message:'已取消修改！'})

      });

    },