el-switch 自定义样式

效果：

 <el-table-column fixed="right" label="审核" align="center" v-if="isShowdetails">
          <template slot-scope="scope">
            <el-switch class="switchStyle" 
            v-model="scope.row.approveResult"  
            active-text="通过"
            active-color="#13ce66" 
            inactive-color="#ff4949" 
            inactive-text="驳回" 
            :active-value="1"
            :inactive-value="0"
            @change="adoptBtn(scope.$index,examineTable,scope.row.approveResult)"></el-switch>
          </template>
        </el-table-column>

因为组件样式加上了scope 防止污染其他组件样式 所以需要使用/deep/来进行样式的修改
.switchStyle{
     /deep/ .el-switch__label {
            position: absolute;
            display: none;
            font-weight:normal;
        }
      /deep/ .el-switch__label *{
            font-size:12px;
        }
       /deep/ .el-switch__label--left {
            z-index: 9;
            left:22px;
            color: #fff;
        }
       /deep/ .el-switch__label--right {
            z-index: 9;
            color: #fff;
        }
       /deep/ .el-switch__label.is-active {
            display: block;
            height:30px;
            line-height:30px;
        }
    }
   /deep/ .switchStyle.el-switch .el-switch__core,.el-switch .el-switch__label {
        width:60px !important;
    }
    .el-switch,.el-switch__core{
        height:30px;
        line-height:30px;
    }
    .el-switch__core{
        border-radius:15px;
        &:after{
            width:20px;
            height:20px;
            top:4px;
            left:3px;
            z-index:10;
        }
    }
    .el-switch.is-checked .el-switch__core::after{
        margin-left:-23px;
    }