vue 显示 禁用 按钮操作

字段：
{
    label: "是否禁用",
    prop: "switch",
    type: "switch",
    viewDisplay:false,
    slot:true,
}

插槽：
<template  slot="switch"
           slot-scope="scope">
  <el-switch
    v-model="scope.row.switch"
    :active-value="true"
    :inactive-value="false"
    @change="switchChange($event, scope.row)"
    active-color="#ff4949"
    inactive-color="#13ce66"
  >
  </el-switch>
</template>

方法：
/**
 * 点击启用禁用
 */
switchChange(e, data){
  //接收页面权限状态值
  let flag = data.switch;
  //保证确认按钮按下之后才会更改权限按钮样式
  data.switch = !data.switch;
  let _this = this
  this.$confirm('是否禁用当前工人', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(function () {
    let gstate;
    //页面状态是true时 点击按钮状态应该更改为 2.已冻结 页面状态是false时，根据条件更改状态
    if(e == true){
      gstate = 2;
      data.state = gstate;
      //更改工人表工人状态
      putObj(data);
    }else{
      //根据工人id查询微信账户表
      appGetObj(data.id).then(response => {
        let gdate = response.data.data;
        //微信账户表有相关人信息时 状态改为已激活 否则已注册
        if(gdate != null){
          gstate = 1;
          data.state = gstate;
          //更改工人表工人状态
          putObj(data);
        }else{
          gstate = 0;
          data.state = gstate;
          //更改工人表工人状态
          putObj(data);
        }
      });
    }
    //操作完成后更改权限按钮样式
    flag ? data.switch = true : data.switch = false
  }).then(data => {
    _this.$message({
      showClose: true,
      message: '禁用成功',
      type: 'success'
    })
    //this.getPage(this.page)
  }).catch(function (err) {
    this.$message({type:'info',showClose: true,message:'已取消修改！'})
  })

}