Radio 单选框
在一组备选项中进行单选
基础用法
由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。
要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Radio label属性的值,label可以是String、Number或Boolean。
禁用状态
单选框不可用的状态。
只要在el-radio元素中设置disabled属性即可,它接受一个Boolean,true为禁用。
注:disabled默认为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
Radio Events
Radio-group Attributes
Radio-group Events
Radio-button Attributes
Checkbox 多选框
一组备选项中进行多选。
基础用法
单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。
在el-checkbox元素中定义v-model绑定变量,单一的checkbox中,默认绑定变量的值会是Boolean,选中为true。
禁用状态
多选框不可用状态。
设置disabled属性即可。
多选框组
适用于多个勾选框绑定到同一个数组的情景,通过是否勾选来表示这一组选项中选中的项。
checkbox-group元素能把多个 checkbox 管理为一组,只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。
indeterminate 状态
indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果。
可选项目数量的限制
使用 min 和 max 属性能够限制可以被勾选的项目的数量。
按钮样式
按钮样式的多选组合。
只需要把el-checkbox元素替换为el-checkbox-button元素即可。此外,Element 还提供了size属性。
带有边框
设置border属性可以渲染为带有边框的多选框。
Checkbox Attributes
Checkbox Events
Checkbox-group Attributes
Checkbox-group Events
Checkbox-button Attributes