Radio单选框

在一组备选项中进行单选

基础用法

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

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

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

效果图如下图所示:

 

禁用状态

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

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

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

效果图如下图所示:

 

 

单选框组

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

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>
</template>

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

 

 

按钮样式

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

<template>
  <div>
    <el-radio-group v-model="radio1">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio2" size="medium">
      <el-radio-button label="上海" ></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio3" size="small">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京" disabled ></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio4" disabled size="mini">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        radio1: '上海',
        radio2: '上海',
        radio3: '上海',
        radio4: '上海'
      };
    }
  }
</script>

效果图如下所示:

 

 

 

 

 

 

 

 

带有边框

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

<template>
  <div>
    <el-radio v-model="radio1" label="1" border>备选项1</el-radio>
    <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
  </div>
  <div style="margin-top: 20px">
    <el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
    <el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio3" size="small">
      <el-radio label="1" border>备选项1</el-radio>
      <el-radio label="2" border disabled>备选项2</el-radio>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio4" size="mini" disabled>
      <el-radio label="1" border>备选项1</el-radio>
      <el-radio label="2" border>备选项2</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        radio1: '1',
        radio2: '1',
        radio3: '1',
        radio4: '1'
      };
    }
  }
</script>

效果图如下所示：

 

 

 

 

 

 

 

 

Radio Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值	string/number/boolean	——	——
label	Radio的value	string/number/boolean	——	——
disable	是否禁用	boolean	——	false
border	是否显示边框	boolean	——	false
size	Radio的尺寸，仅在border为真时有效	string	medium/small/mini	——
name	原生name属性	string	——	——

 

 

 

 

 

 

 

 

 

 

 

 

Radio Events

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

 

 

 

Radio-group Attributes

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Radio-group Events

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

 

 

 

Radio-button Attributes

参数	说明	类型	可选值	默认值
label	Radio的value	string/number	——	——
disable	是否禁用	boolean	——	false
name	原生name属性	string	——	——