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

<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>

猜你喜欢

转载自blog.csdn.net/qq_42753983/article/details/127316291