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

Posted 2021-01-31 ymdzha

我想要的效果

 

官网提供的效果

 

代码：

html

<el-table-column label="对市场公开" width="">
              <template slot-scope="scope">
                <el-switch class="switchStyle" v-model="scope.row.on" active-color="#7958b5" active-text="开" 
                 inactive-color="#e8e4f3" inactive-text="关">
                </el-switch>
              </template>
</el-table-column>

 

CSS

.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 6px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -14px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 50px !important;
}