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>
相关推荐
liangshanbo12153 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15886 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_6 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD6 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
哆啦A梦15887 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫7 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo7 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li8 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐8 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
浪裡遊9 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php