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

小白菜丨真香2025-02-15 21:59

效果图：

一、引入switch组件

给组件自定义一个类：tableScopeSwitch，设置开关的值和对应展示的文字（开为 1，并展示启用；关为 0，并展示禁用）。

<div class="tableScopeSwitchBox">  
  <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>
</div

二、自定义样式

<style lang="scss" scoped>
/deep/.tableScopeSwitchBox .tableScopeSwitch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}

/*打开时文字位置设置*/
/deep/.tableScopeSwitchBox .tableScopeSwitch .el-switch__label--right {
  z-index: 1;
  right: 6px;
}

/*关闭时文字位置设置*/
/deep/.tableScopeSwitchBox .tableScopeSwitch .el-switch__label--left {
  z-index: 1;
  left: 6px;
}

/*显示文字*/
/deep/.tableScopeSwitchBox .tableScopeSwitch .el-switch__label.is-active {
  display: block;
  text-align: center;
}

/*开关按钮的宽度大小*/
/deep/.tableScopeSwitchBox .tableScopeSwitch.el-switch .el-switch__core,
/deep/.tableScopeSwitchBox .el-switch .el-switch__label {
  width: 60px !important;
}
</style>