Radio 单选框

在一组备选项中进行单选。

警告

将 `label` 作为 `value` 使用的方式已被 **废弃**,`label` 仅作为显示文本使用,此用法 **将在** 3.0.0 版本中被移除,请考虑切换到新的 API。

提示

新 API `value` 已在 2.6.0 版本中添加,文档中的示例都使用 `value`。如果您使用的版本 **低于** 2.6.0,请参考

vue
<template>
  <el-radio-group v-model="radio1">
    <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
    <el-radio value="Value 1">Option 1</el-radio>
    <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
    <el-radio label="Label 2 & Value 2">Option 2</el-radio>
  </el-radio-group>
</template>

基础用法

Radio 的选项不应过多。 如果您有很多选项,请改用 Select 选择器。

禁用状态

使用 `disabled` 属性来禁用单选框。

单选框组

适用于在多个互斥的选项中选择的场景。

带有边框

Options 属性 2.11.2

按钮样式

带有按钮样式的单选组合。

Radio API

Radio 属性

名称描述类型默认值
model-value / v-model绑定值string / number / boolean
value 2.6.0单选框的值string / number / boolean
label单选框的标签。如果没有 `value`,`label` 将作为 `value`string / number / boolean
disabled是否禁用单选框booleanfalse
边框是否显示边框booleanfalse
size单选框的尺寸枚举
名称原生 `name` 属性string

Radio 事件

名称描述类型
change绑定值改变时触发Function

Radio 插槽

名称描述
default自定义默认内容

RadioGroup API

RadioGroup 属性

名称描述类型默认值
model-value / v-model绑定值string / number / boolean
size单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效stringdefault
disabled是否禁用单选框组booleanfalse
validate-event是否触发表单验证booleantrue
text-color按钮形式的 Radio 激活时的文本颜色string#ffffff
填充色按钮形式的 Radio 激活时的边框和背景颜色string#409eff
aria-label a11y 2.7.2原生 `aria-label` 属性string
名称原生 `name` 属性string
id原生 id 属性string
label a11y 已废弃原生 `aria-label` 属性string
options 2.11.2选项数据,其中 `value` 和 `label` 和 `disabled` 的键名可以通过 `props` 自定义array
props 2.11.2配置选项object{value: 'value', label: 'label', disabled: 'disabled'}
type 2.11.5渲染选项的组件类型 (例如:`'button'`)枚举'radio'

RadioGroup 事件

名称描述类型
change绑定值改变时触发Function

RadioGroup 插槽

名称描述子标签
default自定义默认内容单选框 / 按钮样式的单选组合

RadioButton API

RadioButton 属性

名称描述类型默认值
value 2.6.0单选框的值string / number / boolean
label单选框的标签。如果没有 `value`,`label` 将作为 `value`string / number / boolean
disabled是否禁用单选框booleanfalse
名称原生 'name' 属性string

RadioButton 插槽

名称描述
default自定义默认内容

来源

组件样式文档

贡献者