Element UI 的单选框、多选框

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