在一组备选项中进行单选
要使用 Radio 组件,只需要设置绑定变量,选中意味着变量的值为相应 Radio 属性的值,可以是、或。v-modellabellabelStringNumberBoolean
<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>
¶基础用法
由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。
Radio Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|
value / v-model |
绑定值 |
string / number / boolean |
— |
— |
label |
Radio 的 value |
string / number / boolean |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
border |
是否显示边框 |
boolean |
— |
false |
size |
Radio 的尺寸,仅在 border 为真时有效 |
string |
medium / small / mini |
— |
name |
原生 name 属性 |
string |
— |
— |
¶Radio Events
事件名称 |
说明 |
回调参数 |
---|
change |
绑定值变化时触发的事件 |
选中的 Radio label 值 |
¶Radio-group Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|
value / v-model |
绑定值 |
string / number / boolean |
— |
— |
size |
单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效 |
string |
medium / small / mini |
— |
disabled |
是否禁用 |
boolean |
— |
false |
text-color |
按钮形式的 Radio 激活时的文本颜色 |
string |
— |
#ffffff |
fill |
按钮形式的 Radio 激活时的填充色和边框色 |
string |
— |
#409EFF |
¶Radio-group Events
事件名称 |
说明 |
回调参数 |
---|
change |
绑定值变化时触发的事件 |
选中的 Radio label 值 |
¶Radio-button Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|
label |
Radio 的 value |
string / number |
— |
— |
disabled |
是否禁用 |
boolean |
— |
false |
name |
原生 name 属性 |
string |
— |
— |