element/examples/docs/radio.md

Radio 单选框

在一组备选项中进行单选

基本用法

选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

:::demo 要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String或者Number。

<template>
  <el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
  <el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
  <el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>

  {{radio}}
</template>

<script>
  export default {
    data () {
      return {
        radio: ''
      };
    }
  }
</script>

:::

Radio Group

:::demo 结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。

<el-radio-group v-model="radio2">
  <el-radio :label="9"></el-radio>
  <el-radio :label="6"></el-radio>
  <el-radio :label="3"></el-radio>
</el-radio-group>

:::

Radio Group Button

一种特殊的单选按钮组。

:::demo 只需要把el-radio元素换成el-radio-button元素即可，此外，Element 还提供了size属性给按钮组，支持large和small两种（如果不设定为默认）。

<el-radio-group v-model="radio31" size="large">
  <el-radio-button label="上海"></el-radio-button>
  <el-radio-button label="北京"></el-radio-button>
  <el-radio-button label="广州" :disabled="true"></el-radio-button>
  <el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
<el-radio-group v-model="radio32">
  <el-radio-button label="上海"></el-radio-button>
  <el-radio-button label="北京"></el-radio-button>
  <el-radio-button label="广州" :disabled="true"></el-radio-button>
  <el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
<el-radio-group v-model="radio33" size="small">
  <el-radio-button label="上海"></el-radio-button>
  <el-radio-button label="北京"></el-radio-button>
  <el-radio-button label="广州" :disabled="true"></el-radio-button>
  <el-radio-button label="深圳"></el-radio-button>
</el-radio-group>

:::

禁用

单选框不可用的状态。

注意：请牢记，选中的条件是绑定的变量值等于label中的值。

:::demo 只要在el-radio元素中设置disabled属性即可，它接受一个Boolean，true为禁用。

<template>
  <el-radio disabled v-model="radio" label="禁用"></el-radio>
  <el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '',
        radio1: '选中且禁用'
      };
    }
  }
</script>

:::

Radio Attributes

参数	说明	类型	可选值	默认值
label	Radio 的 value	string,number	—	—
disabled	是否禁用	boolean	—	false

Radio-group Attributes

参数	说明	类型	可选值	默认值
size	Radio 按钮组尺寸	string	large, small	—

Radio-group Events

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

Radio-button Attributes

参数	说明	类型	可选值	默认值
label	Radio 的 value	string,number	—	—
disabled	是否禁用	boolean	—	false