element-ui checkbox 组件 全选功能

checkbox 有三种状态：全选(显示的’√’),选中部分(显示的’-’),全不选(啥都没显示)。

checkbox 中的属性 indeterminate，只负责样式控制。indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。

案例如下：

<div class="flex-row">
  <el-checkbox
    v-model="checkAll" 
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
  >
    全选
  </el-checkbox>
  <el-checkbox-group
    v-model="query.assignTransportTypeList"
    @change="handleCheckedTransport"
  >
    <el-checkbox
      v-for="(item, index) in commonData.transportType"
      :label="item.value"
      :key="index"
      :value="item.value"
    >
      {{item.label}}
    </el-checkbox>
  </el-checkbox-group>
</div>

属性介绍：

1.checkAll：判断是否全选；

2.isIndeterminate：全选按钮的样式控制属性；

3.handleCheckAllChange：checkbox 的 change 事件。

4.query.assignTransportTypeList: checkbox-group 中的选中集合；

5.handleCheckedTransport：checkbox-group 中的 change 事件。

首先默认 checkAll 为 false（未选择），isIndeterminate 为 false（全不选）。

需求分析：当我们点击 checkbox-group 中的复选框时，我们需要判断是否已经全选，对应的样式要更改；当我们点击全选那个复选框时，会传入是选中还是取消选中，如果是选中，则将所有的值都放入到 checkbox-group 绑定的集合中，如果是取消选中，则清空数组中的数据，代码如下：

handleCheckedTransport(value) {
  let checkedCount = value.length;
  this.checkAll = checkedCount === this.commonData.transportType.length;
  this.isIndeterminate = checkedCount > 0 && checkedCount < this.commonData.transportType.length;
}

我们可以看的，是否全选，最直接判断就是：选中的长度和数据长度是否一致；isIndeterminate 为 true 时，部分勾选；如果为 false 时，则要么全选，要么全不选。

handleCheckAllChange(val) {
  const all = this.commonData.transportType.map(item => {
    return item.value
  })
  this.query.assignTransportTypeList= val ? all : [];
  this.isIndeterminate = false;
},

这里通过全选按钮来全选数据或者清空选中数据；当全选时，我们将所有的值都放入到 checkbox-group 绑定的集合中，如果是取消选中，则清空数组中的数据。

更多详情，请查看：element-ui 官网 checkbox 组件之 indeterminate 状态。