ElementUI 的组件 Switch（开关）如何让文字显示在按钮上_element switch怎么在开关里显示字体

先展示页面效果图：

然后实现步骤：

1、引入相对应的组件：

定义组件的类为 tableScopeSwitch ，为后面样式设定做准备，设置开关的值和对应展示的文字（开为 1，并展示启用；关为 0，并展示禁用）。

v-model 与后端数据库数据进行绑定，按钮状态改变触发 handleStatusChange 函数（这个目前不影响）。

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

2、设定 CSS 样式来实现文字显示在按钮上：

<style>
.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;    /*开关按钮的宽度大小*/
}
</style>

注：其实这些样式可以通过 谷歌浏览器的 F12 键 进行调试，我也是通过这样的样式调整后，直接 copy 到对应文件下的 style 标签里（单个 vue 文件下的 style 标签记得去掉 scoped 属性）。

最后这样就可以达到效果了。