<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;
},