Vue2 elementui2 中 el-switch 实现先判断改变状态

      ​​​​​​​<el-table-column 
            label="渠道状态" 
            prop="state" 
            width="80">
        <template slot-scope="{ row }">
          <el-switch 
                v-model="row.state" 
                :active-value="1" 
                :inactive-value="2" 
                @click.native="handleSwitchange(row.state, row)" 
                disabled 
            />
        </template>
      </el-table-column>

handleSwitchange(e,row) {
      const msg = e === 1 ? `确定关闭渠道 ${row.channelId}吗？` : `确定开启渠道 ${row.channelId}吗？`
      this.$modal.confirm(msg).then(() => {
        // 处理业务逻辑
        row.state = e === 1 ?2:1
      }).then(() => {
        // 成功时执行
        row.state = e === 1 ?2:1
      }).catch(() => {
          //取消或失败时处理
      });
    }

<style lang="scss" scoped>
/* 深度选择器进行样式穿透 */
::v-deep{    
/* 修改elementUI-switch组件 disabled样式 */
 .el-switch.is-disabled {
   opacity: 1;
  }    
  /*修改鼠标悬停显示状态*/
 .el-switch.is-disabled .el-switch__core,
 .el-switch.is-disabled .el-switch__label {
   cursor: pointer !important; /*这里修改成小手状态*/
 }
}
</style>

<style lang="scss" >
/* 修改elementUI-switch组件 disabled样式 */
 .el-switch.is-disabled {
   opacity: 1;
  }    
  /*修改鼠标悬停显示状态*/
 .el-switch.is-disabled .el-switch__core,
 .el-switch.is-disabled .el-switch__label {
   cursor: pointer !important; /*这里修改成小手状态*/
 }
</style>

 <switch-plus v-model="row.state" :active-value="1" :inactive-value="2" @onChange="handleSwitchange(row.state, row)" />

<template>
  <el-switch v-bind="$attrs" @click.native.prevent="$emit('onChange')" disabled />
</template>
<script>
export default {
  name: 'SwitchPlus',
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  },
}
</script>
<style lang="scss" scoped>
//直接写类名（不带deep） 
.el-switch.is-disabled {
  opacity: 1 !important;
  // 用 ::v-deep 包起来
  ::v-deep {
    .el-switch__core , .el-switch__label{
      pointer-events: auto !important;
      cursor: pointer !important;
    }
  }
}
</style>