Radio单选框

Radio单选框

在一组备选项中进行单选

基础用法

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

效果图如下图所示:

 

禁用状态

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

效果图如下图所示:

 

 

单选框组

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

 

 

按钮样式

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

效果图如下所示:

 

 

 

 

 

 

 

 

带有边框

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

效果图如下所示：

 

 

 

 

 

 

 

 

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	——	——