记 elementui switch开关中显示文字问题

我想要的效果

 

官网提供的效果

<el-table-column label="销售状态" min-width="10%">
                <template slot-scope="scope">
                    <el-switch class="switchStyle" v-model="scope.row.on" active-color="#09e" active-text="正常" inactive-color="#ddd" inactive-text="停售"></el-switch>
                </template>
            </el-table-column>

export default {
    data(){
        return{
            on: true
        }
    }
}

.switchStyle{
        .el-switch__label {
            position: absolute;
            display: none;
            font-weight:normal;
        }
        .el-switch__label *{
            font-size:12px;
        }
        .el-switch__label--left {
            z-index: 9;
            left:10px;
            color: #999;
        }
        .el-switch__label--right {
            z-index: 9;
            left: -19px;
            color: #fff;
        }
        .el-switch__label.is-active {
            display: block;
            height:30px;
            line-height:30px;
        }
    }
    .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;
    }