开发项目时做一种开关控件样式，要求显示和隐藏两种状态下的文字、圆点、背景色等都有区别，就研究了一下，各种设置已在代码中标注，小白也可直接复制使用。

    <el-table-column label="操作">
        <template slot-scope="scope">
          <el-switch
            class="switchStyle"
            :active-value="1"
            :inactive-value="0"
            @change="$emit('UpdateStatus', scope.row)"
            active-text="显示"
            inactive-text="隐藏"
            :value="scope.row.status"
            active-color="#67c23a"
          >
          </el-switch>
        </template>
    </el-table-column>

  active-value与inactive-value属性，接受Boolean, String或Number类型的值，此处1表示开，0表示关，与:value值绑定有关或者v-model

  active-text与inactive-text属性来设置开 关的文字描述

  active-color与inactive-color属性来设置开 关的背景色。会直接将背景以及边框颜色都改变，此处不适用，边用css来操作

        （与样式无关）此处涉及开关值的绑定，因为从父接收数据，所以子不可以随便修改父的数据，我便用了:value的形式绑定的开关值，以及子通过$emit的形式向父传递改变开关值的操作。        关联开关的值数据若就在此组件，可直接 v-model='scope.row.status '，@change事件绑定方法即可

        主要的css样式设置，通俗易懂！ 注意必须使用css样式穿透 ::v-deep

::v-deep .switchStyle {
    //开关小盒子
  .el-switch__core {
    width: 70px !important;
    height: 25px !important;
    border-radius: 60px;
    background: #ffffff; //圆球在左时的开关背景色 只改变内部色，不改变边框色
    //圆球在右时的开关背景色在html结构中active-color="#67c23a"设置即可
  }
    //开关内区域
  .el-switch__label { 
    position: absolute;
    padding-top: 1px;
    display: none;
    color: #fff;
    font-size: 10px !important;
    //圆球在左的 文字设置
    &--left {
      color: #9a9a9a !important;
      z-index: 1;
      right: 1px;
    }
    //圆球在右的 文字设置
    &--right {
      color: #ffffff !important;
      z-index: 1;
      left: 1px;
      font-size: 10px;
    }
    &.is-active {
      display: block;
    }
  }
    //圆球靠左的 圆球样式
    .el-switch__core:after {
    top: 15%;
    left: 4%;
    background-color: #d2d2d2;
  }
  //圆球靠右的 圆球样式
  &.el-switch.is-checked .el-switch__core::after {
    top: 15%;
    left: 97%;
    margin-left: -1.063rem;
    background-color: #fff;
  }
}