Radio 单选框
Radio 用于在一组互斥选项中进行单选。VISTA B 直接使用 Element Plus 的 el-radio、el-radio-group 和 el-radio-button，适合数量较少、选项需要直接展示的表单场景。
基础用法
单选框不适合承载过多选项；如果可选项很多，应该使用 Select。通过 v-model 绑定变量，选中项会把对应 Radio 的 value 写入绑定值，value 可以是 string、number 或 boolean。
vue
<script setup>
import { ref } from 'vue'
const radio = ref('1')
</script>
<template>
<el-radio-group v-model="radio">
<el-radio value="1">Option 1</el-radio>
<el-radio value="2">Option 2</el-radio>
</el-radio-group>
</template>禁用状态
设置 disabled 后，单选框不可选。可以禁用单个 Radio，也可以在 RadioGroup 上统一禁用整组。
vue
<el-radio v-model="radio" disabled value="disabled">Option A</el-radio>
<el-radio v-model="radio" disabled value="selected and disabled">
Option B
</el-radio>单选框组
使用 el-radio-group 包裹多个 el-radio 可以实现单选组。通过 change 事件可以响应选中值变化。
vue
<script setup>
import { ref } from 'vue'
const radio = ref(3)
</script>
<template>
<el-radio-group v-model="radio">
<el-radio :value="3">Option A</el-radio>
<el-radio :value="6">Option B</el-radio>
<el-radio :value="9">Option C</el-radio>
</el-radio-group>
</template>带有边框
设置 border 可以渲染带边框的单选框。边框样式常用于表单中需要更强点击区域和更明确分组的场景。
vue
<el-radio-group v-model="radio">
<el-radio value="1" border>Option A</el-radio>
<el-radio value="2" border>Option B</el-radio>
</el-radio-group>Options 属性
el-radio-group 支持通过 options 快速渲染选项。数据字段名可以通过 props 自定义。
vue
<script setup>
import { ref } from 'vue'
const radio = ref(3)
const props = { value: 'id', label: 'name', disabled: 'unable' }
const options = [
{ id: 3, name: 'Option A' },
{ id: 6, name: 'Option B' },
{ id: 9, name: 'Option C', unable: true }
]
</script>
<template>
<el-radio-group v-model="radio" :options="options" :props="props" />
</template>单选按钮
将 el-radio 换成 el-radio-button 后，可以得到按钮组视觉效果。按钮式单选常用于模式切换、视图切换、周期切换等高频选择。
vue
<el-radio-group v-model="radio" size="large" fill="#13aec5">
<el-radio-button value="New York">New York</el-radio-button>
<el-radio-button value="Washington">Washington</el-radio-button>
<el-radio-button value="Los Angeles">Los Angeles</el-radio-button>
</el-radio-group>API
Radio 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
model-value / v-model | 选中项绑定值 | string / number / boolean | 空 |
value | 单选框的值 | string / number / boolean | 空 |
label | 单选框的展示标签；如果没有 value，会作为值使用，此用法已废弃 | string / number / boolean | 空 |
disabled | 是否禁用单选框 | boolean | false |
border | 是否显示边框 | boolean | false |
size | 单选框尺寸 | large / default / small | 空 |
name | 原生 name 属性 | string | 空 |
Radio 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
change | 绑定值变化时触发 | (value: string | number | boolean) => void |
Radio 插槽
| 插槽 | 说明 |
|---|---|
default | 自定义默认内容 |
RadioGroup 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
model-value / v-model | 绑定值 | string / number / boolean | 空 |
size | RadioButton 或带边框 Radio 的尺寸 | large / default / small | default |
disabled | 是否禁用整组 | boolean | false |
validate-event | 输入时是否触发表单校验 | boolean | true |
text-color | 按钮形式的 Radio 激活时的文本颜色 | string | #ffffff |
fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | #409eff |
aria-label | RadioGroup 的无障碍标签 | string | 空 |
name | 原生 name 属性 | string | 空 |
id | 原生 id 属性 | string | 空 |
label | 与 aria-label 相同，已废弃 | string | 空 |
options | 选项数据源 | array | 空 |
props | options 的字段配置 | object | { value: 'value', label: 'label', disabled: 'disabled' } |
type | 使用 options 渲染时的组件类型 | radio / button | radio |
RadioGroup 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
change | 绑定值变化时触发 | (value: string | number | boolean) => void |
RadioGroup 插槽
| 插槽 | 说明 | 子标签 |
|---|---|---|
default | 自定义默认内容 | Radio / RadioButton |
RadioButton 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 单选按钮的值 | string / number / boolean | 空 |
label | 单选按钮的展示标签；如果没有 value，会作为值使用，此用法已废弃 | string / number / boolean | 空 |
disabled | 是否禁用单选按钮 | boolean | false |
name | 原生 name 属性 | string | 空 |
RadioButton 插槽
| 插槽 | 说明 |
|---|---|
default | 默认插槽内容 |
使用提醒
Element Plus 2.6.0 起推荐使用 value 作为 Radio 的真实值，label 作为值的旧用法已废弃并会在 3.0.0 移除。单选项数量过多时，优先使用 Select，避免横向铺开影响表单扫描效率。