南海专业网站建设公司网站收录

效果图：

一、引入switch组件

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

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