点击全选时候,省级能勾选,市级状态改变,页面无法显示勾选状态

img


<el-dialog
      width="60%"
      title="选择配送区域"
      class="address-dialog"
      :visible.sync="areaVisible"
      append-to-body
    >
      <div class="area-dialog">
          <el-checkbox :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>
    </el-dialog>
  </el-dialog>

handleCheckAllChange(value){
        if(value === true){
          let tempArr = [].concat(this.areaList)
              tempArr.map((item)=>{
                const {list} = item;
                  list.map((cityItem) =>{
                  cityItem.selected = true
                });
                console.log(this.areaList);
                item.selected = true 
            })
            this.areaList = tempArr
          } else {
              this.areaList.map((item)=>{
                return item.selected = false
            })
          }
            this.isIndeterminate = false;
  },