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

效果图:

一、引入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>
相关推荐
十盒半价9 分钟前
TypeScript + React:大型项目开发的黄金搭档
前端·typescript·trae
楚轩努力变强1 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端1 小时前
rust基础二(闭包)
前端·rust
菜鸟学Python1 小时前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er2 小时前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping2 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗2 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
未来之窗软件服务3 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录3 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http