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:'已取消修改！'})

      });

    },