el-switch 样式自定义

1、效果图

2、实现方法

			<el-switch
              v-model="scope.row.showIndex"
              :active-value="1"
              :inactive-value="0"
            />

 /deep/.el-switch{
    height: 30px;
    line-height: 30px;
  }
  /deep/.el-switch__core{
    width: 50px!important;
    height: 30px;
    line-height: 30px;
    border-radius: 60px;
  }
  /deep/.el-switch__core:before{
    position: absolute;
    /*content: url("~@/assets/photo.png");*/
    content: '';
    top: 1px;
    left: 1px;
    font-size: 12px;
    text-align: center;
    border-radius: 100%;
    -webkit-transition: all .3s;
    transition: all .3s;
    width: 0px;
    height: 0px;
    background: url("~@/assets/equipment-insert/switch-yes.png");
    background-size: 100% 100%;
    /*background-color: #FFF;*/
    z-index: 2;
  }
  /deep/.el-switch.is-checked .el-switch__core:before {
    left: 100%;
    margin-left: -25px;
    z-index: 2;
    width: 24px;
    height: 24px;
  }
  /deep/.el-switch__core:after {
    width: 24px;
    height: 24px;
  }
  /deep/.el-switch.is-checked .el-switch__core::after {
    margin-left: -25px;
  }
  /deep/.el-switch.is-checked .el-switch__core {
    border-color: #7297FF;
    background-color: #7297FF;
  }