Radio 单选框

在一组备选项中进行单选

基础用法

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

Radio 单选框 - 图1

要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Radio label属性的值,label可以是StringNumberBoolean

  1. <template>
  2. <el-radio v-model="radio" label="1">备选项</el-radio>
  3. <el-radio v-model="radio" label="2">备选项</el-radio>
  4. </template>
  5. <script>
  6. export default {
  7. data () {
  8. return {
  9. radio: '1'
  10. };
  11. }
  12. }
  13. </script>

禁用状态

单选框不可用的状态。

Radio 单选框 - 图2

只要在el-radio元素中设置disabled属性即可,它接受一个Booleantrue为禁用。

  1. <template>
  2. <el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
  3. <el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
  4. </template>
  5. <script>
  6. export default {
  7. data () {
  8. return {
  9. radio: '选中且禁用'
  10. };
  11. }
  12. }
  13. </script>

单选框组

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

Radio 单选框 - 图3

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

  1. <template>
  2. <el-radio-group v-model="radio">
  3. <el-radio :label="3">备选项</el-radio>
  4. <el-radio :label="6">备选项</el-radio>
  5. <el-radio :label="9">备选项</el-radio>
  6. </el-radio-group>
  7. </template>
  8. <script>
  9. export default {
  10. data () {
  11. return {
  12. radio: 3
  13. };
  14. }
  15. }
  16. </script>

按钮样式

按钮样式的单选组合。

Radio 单选框 - 图4

只需要把el-radio元素换成el-radio-button元素即可,此外,Element Plus 还提供了size属性。

  1. <template>
  2. <div>
  3. <el-radio-group v-model="radio1">
  4. <el-radio-button label="上海"></el-radio-button>
  5. <el-radio-button label="北京"></el-radio-button>
  6. <el-radio-button label="广州"></el-radio-button>
  7. <el-radio-button label="深圳"></el-radio-button>
  8. </el-radio-group>
  9. </div>
  10. <div style="margin-top: 20px">
  11. <el-radio-group v-model="radio2" size="medium">
  12. <el-radio-button label="上海" ></el-radio-button>
  13. <el-radio-button label="北京"></el-radio-button>
  14. <el-radio-button label="广州"></el-radio-button>
  15. <el-radio-button label="深圳"></el-radio-button>
  16. </el-radio-group>
  17. </div>
  18. <div style="margin-top: 20px">
  19. <el-radio-group v-model="radio3" size="small">
  20. <el-radio-button label="上海"></el-radio-button>
  21. <el-radio-button label="北京" disabled ></el-radio-button>
  22. <el-radio-button label="广州"></el-radio-button>
  23. <el-radio-button label="深圳"></el-radio-button>
  24. </el-radio-group>
  25. </div>
  26. <div style="margin-top: 20px">
  27. <el-radio-group v-model="radio4" disabled size="mini">
  28. <el-radio-button label="上海"></el-radio-button>
  29. <el-radio-button label="北京"></el-radio-button>
  30. <el-radio-button label="广州"></el-radio-button>
  31. <el-radio-button label="深圳"></el-radio-button>
  32. </el-radio-group>
  33. </div>
  34. </template>
  35. <script>
  36. export default {
  37. data () {
  38. return {
  39. radio1: '上海',
  40. radio2: '上海',
  41. radio3: '上海',
  42. radio4: '上海'
  43. };
  44. }
  45. }
  46. </script>

带有边框

Radio 单选框 - 图5

设置border属性可以渲染为带有边框的单选框。

  1. <template>
  2. <div>
  3. <el-radio v-model="radio1" label="1" border>备选项1</el-radio>
  4. <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
  5. </div>
  6. <div style="margin-top: 20px">
  7. <el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
  8. <el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
  9. </div>
  10. <div style="margin-top: 20px">
  11. <el-radio-group v-model="radio3" size="small">
  12. <el-radio label="1" border>备选项1</el-radio>
  13. <el-radio label="2" border disabled>备选项2</el-radio>
  14. </el-radio-group>
  15. </div>
  16. <div style="margin-top: 20px">
  17. <el-radio-group v-model="radio4" size="mini" disabled>
  18. <el-radio label="1" border>备选项1</el-radio>
  19. <el-radio label="2" border>备选项2</el-radio>
  20. </el-radio-group>
  21. </div>
  22. </template>
  23. <script>
  24. export default {
  25. data () {
  26. return {
  27. radio1: '1',
  28. radio2: '1',
  29. radio3: '1',
  30. radio4: '1'
  31. };
  32. }
  33. }
  34. </script>

Radio Attributes

参数说明类型可选值默认值
value / v-model绑定值string / number / boolean
labelRadio 的 valuestring / number / boolean
disabled是否禁用booleanfalse
border是否显示边框booleanfalse
sizeRadio 的尺寸,仅在 border 为真时有效stringmedium / small / mini
name原生 name 属性string

Radio Events

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

Radio-group Attributes

参数说明类型可选值默认值
value / v-model绑定值string / number / boolean
size单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效stringmedium / small / mini
disabled是否禁用booleanfalse
text-color按钮形式的 Radio 激活时的文本颜色string#ffffff
fill按钮形式的 Radio 激活时的填充色和边框色string#409EFF

Radio-group Events

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

Radio-button Attributes

参数说明类型可选值默认值
labelRadio 的 valuestring / number
disabled是否禁用booleanfalse
name原生 name 属性string