elementui按钮组件-ElementUI的组件Switch（开关）如何让文字显示在按钮上

首先展示页面的疗效图：

后续实现步骤： 1、引入相应组件：

定义组件的类为tableScopeSwitch，为前面的样式设置做准备elementui按钮组件，设置开关的值以及对应的显示文本（open为1，开启显示；off为0elementui按钮组件，关闭显示）。

v-model与前端数据库数据绑定，当按键状态发生变化时会触发handleStatusChange函数（目前不受影响）。

2.设置按钮上显示文本的CSS样式：

.tableScopeSwitch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
}
/*打开时文字位置设置*/
.tableScopeSwitch .el-switch__label--right {
    z-index: 1;
    right: 6px;    /*不同场景下可能不同，自行调整*/
}
/*关闭时文字位置设置*/
.tableScopeSwitch .el-switch__label--left {
    z-index: 1;
    left: 6px;    /*不同场景下可能不同，自行调整*/
}
/*显示文字*/
.tableScopeSwitch .el-switch__label.is-active {
    display: block;
}
.tableScopeSwitch.el-switch .el-switch__core,
.el-switch .el-switch__label {
    width: 75px !important;    /*开关按钮的宽度大小*/
}

注：虽然这个样式可以通过微软浏览器的F12键调试，但我也是在调整这个样式后直接复制到对应文件下的style标签中（记得把单个vue文件下的style标签中的scoped属性去掉） ）。

最终，这将是有疗效的。