ElementUI中switch开关的使用--关于如何将文字显示在按钮上的实现

最新推荐文章于 2024-05-11 16:33:41 发布

高冷冷

最新推荐文章于 2024-05-11 16:33:41 发布

阅读量1.7k

点赞数 2

分类专栏： vue 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_43754395/article/details/126657659

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在真实项目中的需求需要实现的效果图：

![在这里插入图片描述](https://img-blog.csdnimg.cn/97a0aad6cd754cc297ec54fa427294d7.png#pic_center)

具体实现步骤：

(1) vue代码块，此处写了class="switchClass"类名

 		<el-table-column prop="status" label="状态" align="center">
	            <template slot-scope="scope">
	              <el-switch
	                v-model="scope.row.status"
	                class="switchClass"
	                :active-value="1"
	                :inactive-value="0"
	                :value="scope.row.status"
	                active-text="ON"
	                inactive-text="OFF"
	                @change="changeSwitch(scope.row)"
	              />
	              <span class="switch-text" :style="{[scope.row.status?'left':'right']:'26px',color:scope.row.status?'#ff9000':'#1D2129'}">{{ scope.row.status?'开':'关' }}</span>
	            </template>
        </el-table-column>

（2）修改el-switch的默认样式:

注意：一定要注意style中不能有scoped属性，否则写的样式可能会不生效。

		  /* switch按钮样式 */
		.switchClass .el-switch__label {
		    position: absolute;
		    display: none;
		    color: #fff !important;
		}
		/*打开时文字位置设置*/
		.switchClass .el-switch__label--right {
		    z-index: 1;
		}
		/* 调整打开时文字的显示位子 */
		.switchClass .el-switch__label--right span{
		    margin-right: 13px;
		    font-size: 12px;
		
		}
		/*关闭时文字位置设置*/
		.switchClass .el-switch__label--left {
		    z-index: 1;
		}
		/* 调整关闭时文字的显示位子 */
		.switchClass .el-switch__label--left span{
		    margin-left: 17px;
		    font-size: 12px;
		}
		/*显示文字*/
		.switchClass .el-switch__label.is-active {
		    display: block;
		}
		/* 调整按钮的宽度 */
		.switchClass.el-switch .el-switch__core,
		.el-switch .el-switch__label {
		     width: 42px !important;
		     margin: 0;
		}