vue + element 多选与反选 反选功能不成功怎么解决

Question

 <div class="area-dialog">
          <el-checkbox style="margin-bottom: 20px" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-row>
          <template v-for="(province, index) in areaList">
            <el-col v-if="province.list.length > 0" :key="index" class="province-wrap" :span="8">
              <el-checkbox-group v-model="province.selected" @change="checkboxChange(province.keyId, province.selected)">
                <el-checkbox>{{ province.provinceName }}</el-checkbox>
              </el-checkbox-group>
              <el-cascader v-model="province.selectCity" :options="province.list" :props="{multiple: true,children: 'list',label: 'city',value: 'city',checkStrictly: true,}" collapse-tags filterable />
            </el-col>
          </template>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="areaVisible = false">取 消</el-button>
        <el-button type="primary" @click="getSelectData">确 定</el-button>
      </div>

// 单选省级
    checkboxChange(provincekeyId, selected) {
      this.areaList.map((item) => {
        this.isIndeterminate = true
        this.checkAll = true
        const { keyId, list } = item;
        const allCity = list.map((cityItem) => {
          const { city } = cityItem;
          return [city];
        });
        if (keyId === provincekeyId && selected) {
          item.list.map(v => {
            v.selected = true
          })
          item.selectCity = allCity; 
        }
        if (keyId === provincekeyId && !selected) {
          item.selectCity = [];
        }
        return item;
      });

    },
    // 全选监听事件
    handleCheckAllChange(value) {
      console.log(value);
      if (value === true) {
        let tempArr = [].concat(this.areaList)
        tempArr.map((item, index) => {
          const { list } = item;
          const allCity = list.map((cityItem) => {
            const { city } = cityItem;
            return [city];
          });
          item.selectCity = allCity;
          item.selected = true
        })
        this.areaList = tempArr
      } else {
        this.areaList.map((item) => {
          item.selectCity = []
          return item.selected = false
        })
      }
      this.isIndeterminate = false;
      
    },

Answer 1

全选的checkAll 在子项每次做选中的时候判断 目前 所有选中的内容长度是否与全部子项数据长度一致，一致的话就手动吧checkAll改成true