Vue + Element el-raido-button绑定事件

qq_42753983

已于 2022-10-14 11:03:09 修改

阅读量2k

点赞数

文章标签： vue.js elementui 前端

于 2022-10-14 10:56:53 首次发布

本文链接：https://blog.csdn.net/qq_42753983/article/details/127316291

版权

<el-radio-group
	v-model="status"
	@change="chooseStatus(status)"
>
	<el-radio-button
		v-for="(item, index) in this.radioBtnList"
		:key="index"
		:label="item.type"
		>{{ item.Name }}{{ item.Value }}
    </el-radio-button>
</el-radio-group>

如果想要修改el-radio-button样式  发现写在<style  lang='scss' scoped></style>不生效

解决办法  只需要在<style lang='scss' scoped></style>,上面重新写<style></style>,在里面写样式即可

例如：

<style>
    // 默认选中样式及切换样式
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
	    color: #fff !important;
	    background-color: rgba(255, 140, 8, 1) !important;
	    border-color: rgba(255, 140, 8, 1) !important;
	    -webkit-box-shadow: -1px 0 0 0 rgba(255, 140, 8, 1) !important;
	    box-shadow: -1px 0 0 0 rgba(255, 140, 8, 1) !important;
    }
    // 没有默认选中样式
    .el-radio-button__inner {
	    color: rgba(255, 140, 8, 1) !important;
	    border-color: rgba(255, 140, 8, 1) !important;
    }
</style>

<style lang='scss' scoped></style>