Api

el-radio

基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="demo-box demo-radio">
  <el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio>
  <el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio>
  <el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio>
</div>
<template>
  <el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio>
  <el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio>
  <el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio>
</template>

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

Radio Group

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="demo-box demo-radio">
  <el-radio-group :value.sync="radio2">
    <el-radio :label="9"></el-radio>
    <el-radio :label="6"></el-radio>
    <el-radio :label="3"></el-radio>
  </el-radio-group>
</div>

<el-radio-group :value.sync="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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<div class="demo">
  <el-radio-group :value.sync="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>
</div>
<div class="demo">
  <el-radio-group :value.sync="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>
</div>
<div class="demo">
  <el-radio-group :value.sync="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>
</div>

<el-radio-group :value.sync="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 :value.sync="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 :value.sync="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>

禁用

1
2
3
4
5
6
7
8

<div class="demo-box demo-radio">
  <el-radio disabled :value.sync="radio" label="禁用"></el-radio>
  <el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio>
</div>

<el-radio disabled :value.sync="radio" label="禁用"></el-radio>
<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio>

Radio API

参数 说明 类型 可选值 默认值
value 绑定值 string
label 真实值 string
disabled 禁用 boolean true, false false

Radio Group API

参数 说明 类型 可选值 默认值
value 绑定值 string
size 尺寸 string large, small

Radio Button API

参数 说明 类型 可选值 默认值
label 真实值 string
disabled 禁用 boolean true, false false