ElementUI中switch开关的使用--关于如何把文字显示在按钮上

先上图： 拿走说一声：拒绝伸手党！！！！！

先定义class：

<el-switch class="tablescope" @change="handleStatusChange(scope.$index, scope.row)" :active-value="1" :inactive-value="0" v-model="scope.row.status" inactive-text="否" active-text="是" ></el-switch>

然后重点： style上不要加 scoped 了 上样式：

<style lang="scss"> .tablescope{ .el-switch__label--left { position: relative; left: 45px; color: #fff; z-index: -1111; } .el-switch__core{ width: 50px !important; } .el-switch__label--right { position: relative; right: 46px; color: #fff; z-index: -1111; } .el-switch__label--right.is-active { z-index: 1111; color: #fff !important; } .el-switch__label--left.is-active { z-index: 1111; color: #9c9c9c !important; } } </style>

有什么问题欢迎指正！！！大佬勿喷。。。