先展示页面效果图：
然后实现步骤：
1、引入相对应的组件：
定义组件的类为 tableScopeSwitch ，为后面样式设定做准备，设置开关的值和对应展示的文字（开为1，并展示启用；关为0，并展示禁用）。
v-model 与后端数据库数据进行绑定，按钮状态改变触发handleStatusChange 函数（这个目前不影响）。
<el-switchclass="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 属性）。
最后这样就可以达到效果了。
如果觉得《ElementUI 的组件 Switch（开关）如何让文字显示在按钮上》对你有帮助，请点赞、收藏，并留下你的观点哦！
