element checkbox复选框实现全选功能

应一个小姐姐的要求写一下实现复选框全选功能，这里推荐先看下elementui文档，里面属性写的明明白白。

首先上代码：

html：

 <div class="singleSearch"><span class="searchSpan">模型类型：</span>
            <el-checkbox v-model="checkAll" label="全部" :indeterminate="isIndeterminateModel" @change="handleCheckAllChange" />&nbsp;&nbsp;&nbsp;
            <el-checkbox-group v-model="modelType" @change="handleCheckedmodelChange">
              <el-checkbox v-for="model in allmodelType" :key="model" :label="model" />
            </el-checkbox-group>
          </div>

注意比较重要的属性（名字可以根据自己需要改变)

checkAll：值为布尔类型，实现全选按钮的状态

isIndeterminatemodel：当复选框其余按钮全部选中时，这个值变为true，全选按钮选中，反之全选按钮不选中

allmodelType是我自己的数据，遍历显示出来数据

modelType：用来记录你选中的哪个复选框

效果图：

这里我们先看模型类型这一个demo

点击其余一个按钮：（注意这个全选按钮是没选种状态，只是加了一个样式，看下边选中是什么样子的）

 点击全选：

 js实现：

在data里双向数据绑定写上：

​      modelType：'',
      checkAll: false,
      isIndeterminateModel: false,
      allmodelType: ['过程模型', '算法模型', '统计模型', '仿真模型', '分析模型', 'ZZ规则模型', 'BZ规则模型', '其他'],

​

 在methods方法里写：

 handleCheckAllChange(val) {
      this.modelType = val ? this.allmodelType : []
      this.isIndeterminateModel = false
    },
    handleCheckedmodelChange(value) {
      const modelLength = value.length
      this.checkAll = modelLength === this.allmodelType.length
      this.isIndeterminateModel = modelLength > 0 && modelLength < this.allmodelType.length
    },

思路就是判断数组长度是否等于你allmodelType的长度，如果小于说明没选全，等于说明全选