Form-checkbox多选框

╰+哭是因爲堅強的太久メ 2022-04-10 11:19 343阅读 0赞

![20190123150315117.png][]

<el-checkbox v-model="checked">备选项</el-checkbox>

data() {
      return {
        checked: true
      };
    }

![20190123150543446.png][]

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。  
checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。

**el-checkbox的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。**

label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。

<el-checkbox-group v-model="checklist">
      <el-checkbox label="复选框A"></el-checkbox>
      <el-checkbox label="复选框B">bb</el-checkbox>
      <el-checkbox label="复选框C"></el-checkbox>
      <el-checkbox label="禁用" disabled></el-checkbox>
      <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>

data() {
      return {
        checklist: [ '选中且禁用', '复选框A']
      };
    }

![20190123153627436.png][]

<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{
       {city}}</el-checkbox>
    </el-checkbox-group>

![20190123153317166.png][]

<div>
        <el-checkbox-group v-model="checkboxGroup1">
          <el-checkbox-button v-for="city in cities" :label="city" :key="city">{
       {city}}</el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div style="margin-top: 20px">
        <el-checkbox-group v-model="checkboxGroup2" size="medium">
          <el-checkbox-button v-for="city in cities" :label="city" :key="city">{
       {city}}</el-checkbox-button>
        </el-checkbox-group>
      </div>

### Checkbox Attributes ###

<table> 
 <thead> 
  <tr> 
   <th style="width:145px;">参数</th> 
   <th style="width:429px;">说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:145px;">label</td> 
   <td style="width:429px;">选中状态的值（只有在<code>checkbox-group</code>或者绑定对象类型为<code>array</code>时有效）</td> 
   <td>string / number / boolean</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">disabled</td> 
   <td style="width:429px;">是否禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border</td> 
   <td style="width:429px;">是否显示边框</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">size</td> 
   <td style="width:429px;">Checkbox 的尺寸，仅在 border 为真时有效</td> 
   <td>string</td> 
   <td>medium / small / mini</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">：indeterminate</td> 
   <td style="width:429px;">设置 indeterminate 状态，只负责样式控制（用于实现全选，全选或全不选该值为false，表示以确定状态）</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

### Checkbox Events ###

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@change</td> 
   <td>当绑定值变化时触发的事件</td> 
   <td>更新后的值（值为bool）</td> 
  </tr> 
 </tbody> 
</table>

### Checkbox-group Attributes ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>size</td> 
   <td>多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效</td> 
   <td>string</td> 
   <td>medium / small / mini</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>min</td> 
   <td>可被勾选的 checkbox 的最小数量</td> 
   <td>number</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>max</td> 
   <td>可被勾选的 checkbox 的最大数量</td> 
   <td>number</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

### [¶][Link 1]Checkbox-group Events ###

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@change</td> 
   <td>当绑定值变化时触发的事件</td> 
   <td>更新后的值（值为选中的复选框的值构成的数组）</td> 
  </tr> 
 </tbody> 
</table>

### Checkbox-button Attributes ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>label</td> 
   <td>选中状态的值（只有在<code>checkbox-group</code>或者绑定对象类型为<code>array</code>时有效）</td> 
   <td>string / number / boolean</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

[20190123150315117.png]: /images/20220331/cd2639d2854e449ca9365003af96154a.png
[20190123150543446.png]: /images/20220331/57c31c4485eb49558b14984523d945cc.png
[20190123153627436.png]: /images/20220331/a262a4f005c84ad7b21bb81447ea1d07.png
[20190123153317166.png]: /images/20220331/5bda3e40f71449b2b2d39f9e40bc2b96.png
[Link 1]: http://element-cn.eleme.io/#/zh-CN/component/checkbox%23checkbox-group-events