城市多选组件
最近收到了一个需求，管理系统需要上线一个活动，但是活动是根据地区上线的，最小范围到市，于是有了下面这个组件
页面展示如图：
上代码～～～
<template>
<div class="tm-mil-city">
<p class="tm-mil-city-title tm-mil-mb20">{{name}}</p>
<div class="tm-mil-district-box tm-mil-mb20">
<Select class="tm-mil-selsect" style='width:200px' v-model='province' placeholder='全部' @on-change='changeProvince'>
<Option v-for='item in provinceList' :value='item.id' :key='item.id'>{{ item.regionName }}</Option>
</Select>
<span class="tm-mil-selsect-all-btn tm-mil-ml20 tm-mil-colB" @click="chooseAllRegion">全选</span>
<div class="tm-mil-line-loading" v-if="province && !cityList.length"><img src="../assets/loading.gif" alt=""></div>
<div class="tm-mil-mb20" v-if="cityList.length">
<CheckboxGroup style="marginTop:10px;width:900px" v-model="checkCity">
<Checkbox v-for='item in cityList' :key='item.id' :label="item.regionCode">{{item.regionName}}</Checkbox>
</CheckboxGroup>
<Button v-show="cityList.length" size="small" style="marginTop:10px" @click="saveCheckCity">确定</Button>
</div>
</div>
<p class="tm-mil-city-title tm-mil-mb20">已选择的地区</p>
<div class="tm-mil-line-loading" v-if="waiting"><img src="../assets/loading.gif" alt=""></div>
<div class="tm-mil-choose-district" v-else>
<div v-for="(item, idx) in allCheckCityShowList" :key="idx">
<span class="tm-mil-colB">{{provinceFilter(item.province)}}</span>
<span class="tm-mil-ml10" v-for="(obj, indx) in item.cityList" :key="indx" >{{obj}}</span>
</div>
<span v-if="!allCheckCityShowList.length">全部地区</span>
</div>
</div>
</template>注： <Select></Select>／<CheckboxGroup></CheckboxGroup>都是iview的组件，详情请看iview官网，同理elementUi也有相同的组件
iview官网
elementUi官网
data() {
return {
waiting: false, // loading
province: '', // 当前的省
provinceList: [], // 省列表
