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

代码1:

 

    

         

            v-model="scope.row.showState"

            active-color="#52C4CD"

            inactive-color="#DCDFE6"

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

            :active-value="true"

            :inactive-value="false"

         >

     

 

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

      });

    },

你可能感兴趣的:(vue.js,javascript,elementui)