el-radio-group设置未选中颜色
时间: 2023-08-06 13:05:01 浏览: 792
你可以使用 `el-radio-group` 的 `inactive-color` 属性来设置未选中的颜色。例如:
```html
<el-radio-group v-model="radio" inactive-color="#999">
<el-radio :label="1">选项一</el-radio>
<el-radio :label="2">选项二</el-radio>
<el-radio :label="3">选项三</el-radio>
</el-radio-group>
```
在上面的代码中,`inactive-color` 属性被设置为 `#999`,表示未选中的选项的颜色为灰色。你可以根据自己的需要设置不同的颜色。
相关问题
el-radio-group设置未选中填充颜色
el-radio-group可以通过设置未选中状态的样式来实现未选中填充颜色的效果。你可以在el-radio-group的样式中设置以下代码来实现:
```
.el-radio__input.is-checked+.el-radio__label::before {
border-color: #409EFF;
background-color: #409EFF;
}
.el-radio__input+.el-radio__label::before {
border-color: #dcdfe6;
background-color: #dcdfe6;
}
```
其中,`.el-radio__input.is-checked+.el-radio__label::before`表示选中状态下的样式,`background-color`属性设置填充颜色;`.el-radio__input+.el-radio__label::before`表示未选中状态下的样式,同样可以通过`background-color`属性设置填充颜色。你可以根据具体需求修改颜色值。
el-radio-group 默认选中
在使用 el-radio-group 组件时,可以通过设置 v-model 绑定的值来设置默认选中的单选按钮。例如:
<el-radio-group v-model="selectedRadio">
<el-radio label="Option 1"></el-radio>
<el-radio label="Option 2"></el-radio>
<el-radio label="Option 3"></el-radio>
</el-radio-group>
data() {
return {
selectedRadio: 'Option 2'
}
}
这样在页面渲染时,Option 2 单选按钮将被默认选中。
阅读全文