el-radio-group设置未选中填充颜色
时间: 2023-08-06 16:04:39 浏览: 135
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` 的 `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 默认选中的选项是通过 v-model 来实现的。在引用[3]的例子中,通过将 v-model 绑定到 data 中的 radio 变量,可以设置 el-radio-group 的默认选中项。在例子中,radio 的初始值为 3,所以 el-radio-group 默认选中的选项是 label 值为 3 的备选项。
中的代码片段示例:
```
<template>
<el-radio-group v-model="radio">
<el-radio :label="1">备选项</el-radio>
<el-radio :label="2">备选项</el-radio>
<el-radio :label="3">备选项</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
radio: 3
};
}
}
</script>
```
所以 el-radio-group 默认选中的是 label 值为 3 的备选项。