記 elementui switch開關中顯示文字問題

我想要的效果

 

官網提供的效果

 

代碼：

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;
}