一、概述

因專案需求，需要做一個多選設定。

先來看一下官方的demo

test.vue

<template>
  <div>
    <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>
  </div>
</template>
<script>
  const cityOptions = ['上海', '北京', '廣州', '深圳'];
  export default {
    data() {
      
 
return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount 
 
= value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

效果如下：

indeterminate 屬性用以表示 checkbox 的不確定狀態，一般用於實現全選的效果。

當indeterminate為true時，會出現減號，表示不是全選。為false，會出現對勾，表示全選。

全選的標籤用的是el-checkbox，v-model繫結的值是布林值。

el-checkbox-group標籤中，v-model繫結的值是陣列，數組裡面就是繫結的label的值。

二、專案演示

注意：在官方的demo中，使用的基礎資料是：['上海', '北京', '廣州', '深圳']

發現沒有，它的資料機構很簡單，在實際專案中，其實資料會比它複雜一點，比如：

[
    {
      id:1,
      name:'上海',
      checkAll:false,
      isIndeterminate:false,
      checkedCities:[],
      children:[
        {
          parentId:1,
          id:2,
          name:'松江區',
        },
        {
          parentId:1,
          id:3,
          name:'楊浦區區',
        },
      ]
    },
    {
      id:10,
      name:'武漢',
      checkAll:false,
      isIndeterminate:false,
      checkedCities:[],
      children:[
        {
          parentId:10,
          id:11,
          name:'漢陽區',
        },
        {
          parentId:10,
          id:12,
          name:'武昌區',
        },
      ]
    }
  ]

test.vue

<template>
  <div>
    <div class="area-list" style="overflow:hidden" v-for="(item,index) in cities" :label="item.id"
         :key="item.id">
      <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll"
                   @change="handleCheckAllChange($event,item)">{{item.name}}
      </el-checkbox>
      <el-checkbox-group v-model="item.checkedCities" class="a-row" @change="handleCheckedCitiesChange($event,item)">
        <el-checkbox v-for="(item2,index2) in item.children"
                     :label="item2.id"
                     :key="item2.id">
          <div>{{item2.name}}</div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
      當前選擇的是：{{option}}
    </div>
  </div>
</template>
<script>
  const cityOptions = [
    {
      id:1,
      name:'上海',
      checkAll:false,
      isIndeterminate:false,
      checkedCities:[],
      children:[
        {
          parentId:1,
          id:2,
          name:'松江區',
        },
        {
          parentId:1,
          id:3,
          name:'楊浦區區',
        },
      ]
    },
    {
      id:10,
      name:'武漢',
      checkAll:false,
      isIndeterminate:false,
      checkedCities:[],
      children:[
        {
          parentId:10,
          id:11,
          name:'漢陽區',
        },
        {
          parentId:10,
          id:12,
          name:'武昌區',
        },
      ]
    }
  ];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: [],
        cities: cityOptions,
        isIndeterminate: true,
        option:[],
      };
    },
    methods: {
      // 勾選一級選單時
      handleCheckAllChange(val,item) {
        // console.log("handleCheckAllChange",val)
        // console.log(item)
        // 判斷二級選單資料不為空
        if(item.children&&item.children.length>0){
          // 如果勾選一級，則checkedCities填充所有二級的id，否則為空陣列
          item.checkedCities=val?item.children.map(ele=>ele.id):[]
          // 固定狀態為false,操作一級選單時，只有2種狀態，要麼勾選，要麼不不勾選，沒有半選狀態
          item.isIndeterminate =false
        }
        this.getOption()
      },
      // 勾選二級選單時
      handleCheckedCitiesChange(value,item) {
        // 判斷二級選單資料不為空，並且當前選中列表長度等於二級選單長度
        if(item.children&&item.children.length>0&&value.length==item.children.length){
          // 設定全選為true，設定圖示為全選
          item.checkAll=true
          item.isIndeterminate = false
        } // 判斷二級選單資料不為空，並且當前選中列表長度小於二級選單長度，並且當前選中列表不為空
        else if(item.children&&item.children.length>0&&value.length<item.children.length&&value.length>0){
          // 設定全選為false，設定圖示為半選
          item.checkAll=false
          item.isIndeterminate = true
        }
        else{
          item.checkAll=false
          item.isIndeterminate = false
        }
        this.getOption()
      },
      // 獲取選擇的選項
      getOption(){
        this.option=[]
        for (let val of this.cities) {
          // console.log("val",val)
          // 一級選單勾選時，則全部勾選二級選單
          if(val.checkAll){
            this.option.push(val.id)
          }
          // 二級選單有勾選時
          if(val.checkedCities&&val.checkedCities.length>0){
            // console.log("二級選單有資料",val.checkedCities)
            // 加入一級選單
            if(this.option.indexOf(val.id)==-1){
              this.option.push(val.id)
            }
            // 加入二級選單勾選
            for (let val2 of val.checkedCities) {
              this.option.push(val2)
            }
          }
        }
        return this.option
      },
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .area-list{
    margin-bottom: 13px;
    .el-checkbox{
      color: #333;
      font-size: 14px;
      width: 80px;
    }
  }
  .a-row{
    display: inline-block;
  }
</style>

效果如下：

注意：最左邊的是一級選單，後面的都是二級選單。當二級選單，只有要1個選中，那麼一級選單就是半選狀態，非全選。

因此，提交表單引數時，也要將一級選單的id提交過去才行。

本文參考連結：

https://element.eleme.cn/#/zh-CN/component/checkbox#jin-yong-zhuang-tai