在element ui 中，开关的文字不能够放到开关里面，只能放到外面，这样不仅看起来很难看，也非常占用地方
想实现下方一样的样式，把文字放到开关里面，可惜element ui并不支持这个功能，只有element plus 才支持，但是一个项目不可能即用element ui 又用plus，所以我便对Switch组件的css样式进行了修改
修改了的代码（这里主要看的是css部分代码）
注意：有部分代码需要你手动调整，我的样式不一定符合你的项目，可能需要调整的样式在代码里面都有注释，自己认真看看
<template><div><el-switchclass="tableScopeSwitch":active-value="1":inactive-value="0"active-text="启用"inactive-text="禁用"v-model="value"></el-switch></div>
</template><script>
export default {data() {return {value: 0, // 绑定的值};},
};
</script>
<style>
.tableScopeSwitch .el-switch__label {position: absolute;display: none;color: #fff !important; /*文字颜色 自行调整*/
}
/*打开时文字位置设置*/
.tableScopeSwitch .el-switch__label--right {z-index: 1;right: -8px; /*不同场景下可能不同，自行调整*/
}
/*关闭时文字位置设置*/
.tableScopeSwitch .el-switch__label--left {z-index: 1;left: 23px; /*不同场景下可能不同，自行调整*/
}
/*显示文字*/
.tableScopeSwitch .el-switch__label.is-active {display: block;
}
.tableScopeSwitch.el-switch .el-switch__core,
.el-switch .el-switch__label {width: 63px !important; /*开关按钮的宽度大小,自行调整*/
}
</style>下面是修改后的样式
最后这样就可以达到效果了
