City multi-choice component

Recently, I received a request that the management system need to launch an activity, but the activity is based on the region, with the minimum range to the city, so I have the following component
The page is shown as follows:

On the code ~ ~ ~

<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 =' provider' placeholder =' all' @ on-change =' changeprovider' >
 <Option v-for='item in provinceList' :value='item.id' :key='item.id'>{{ item.regionName }}</Option>
 </Select>
 < span class = "TM-mil-selsect-all-btntm-mil-ml20tm-mil-colb" @ click = "chooselegion" > select all < /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 = "margitop: 10px" @ click = "savecheckity" > ok < /Button >
 </div>
 </div>
 < p class = "TM-mil-city-title TM-mil-mb20" > selected region < /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 "> all regions < /span >
 </div>
 </div>
 </template>

Note: < select > </select >/< checkboxgroup > </checkboxgroup > are all components of iview. please refer to iview website for details. similarly, elementUi has the same components.
Iview website
ElementUi official website

data() {
 return {
 waiting: false, // loading
 Provision:'',//Current Province
 ProvinceList: [], // province list
 Municipality: [{id: 2, name:' Beijing' }, {id: 3, name:' Tianjin' }, {id: 10, name:' Shanghai' }, {id: 23, name:' Chongqing' }, {id: 2, name:' Beijing'}],//municipality directly under the central government
 CityList: [], // citylist
 ActivityTime: [], // activity time
 CheckCity: [], // List of Selected Cities in Current Province-Show
 AllCheckCityApi: [], ///all city lists-interface
 AllCheckCitySave: {// store the list of cities corresponding to all selected provinces-store
 // '10001': [{code:'10111', name:' Beijing'}]
 },
 AllCheckCityShowList: [// store a list of all selected cities-show
 //{provision:' 10001', citylist: ['Shanghai', 2, 3]}
 ]
 }
 },

Functions:
Please enter the code

//Get Provincial Data
 getOrigin() {
 this.axios.get(`/users/open/region/topRegions`).then(res => {
 if (res.status === 200) {
 this.provinceList = res.data
 }
 })
 }
 //Return the name of the province
 provinceFilter(id) {
 return this.provinceList.filter(item => item.id === id)[0].regionName
 }
 //Select all regions
 chooseAllRegion() {
 this.province = 0
 this.cityList = []
 this.checkCity = []
 this.allCheckCityApi = []
 this.allCheckCitySave = []
 this.allCheckCityShowList = []
 }
 //Store Data after Saving City-Interface
 handleSaveCityList() {
 let _arr = []
 for (var key in this.allCheckCitySave) {
 _arr = _arr.concat(this.allCheckCitySave[key])
 }
 this.allCheckCityApi = _arr
 }

//Change Province
 changeProvince(parentId) {
 if (!  parentId) {
 return
 }
 this.cityList = []
 //Get a list of cities in the province
 this.axios.get(`/users/open/region/${parentId}/subRegions`).then(res => {
 if (res.status === 200) {
 this.cityList = res.data
 }
 })
 //Handle the selected cities
 let _checkCity = this.allCheckCitySave[parentId] || []
 let _checkCityList = []
 _checkCity.forEach(el => {
 _checkCityList.push(el.regionCode)
 })
 this.checkCity = JSON.parse(JSON.stringify(_checkCityList))
 }
 //Save the selected current city
 saveCheckCity() {
 //Process the selection of different provinces and save the selected launching cities in the current province.
 if (!  this.checkCity.length) {
 return
 }
 this.waiting = true
 //provincial code of current city
 let _province = JSON.parse(JSON.stringify(this.province))
 //Province name of current city
 let _provinceName = this.Municipality.filter(el => el.id === _province)[0] && this.Municipality.filter(el => el.id === _province)[0].name || ''
 //list of selected cities (code name level)
 let _arrCheckMsgList = []
 //currently selected city code
 let _arrCheck = JSON.parse(JSON.stringify(this.checkCity))
 _arrCheck.forEach(el => {
 let _obj = this.cityList.filter(_el => _el.regionCode === el)[0]
 //Distinguish municipal districts
 let _regionName = _provinceName + _obj.regionName
 let _regionLevel = _obj.regionLevel
 let obj = {regionCode: el, regionName: _regionName, regionLevel: _regionLevel, parentId: _province}
 // let obj = {regionCode: el, regionName: _regionName, regionLevel: _regionLevel}
 _arrCheckMsgList.push(obj)
 })
 //Store in the list of selected cities corresponding to the current province-Store
 this.$set(this.allCheckCitySave, _province, _arrCheckMsgList)
 //Store Data after Saving City-Interface
 this.handleSaveCityList()
 //Handle the data display of the selected release area
 let _arrCheckMsg = []
 //processing the display list-city name-municipality directly under the central government (Beijing, Shanghai, etc.) prefix the municipality directly under the central government when selecting regions, e.g. Beijing municipality area/Beijing county
 this.cityList.map(obj => {
 if (_arrCheck.indexOf(obj.regionCode) > -1) {
 _arrCheckMsg.push(_provinceName + obj.regionName)
 }
 })
 let _msgObj = {
 province: _province,
 cityList: _arrCheckMsg
 }
 let _len = this.allCheckCityShowList.filter(item => item.province === _province).length || 0
 //Add/Replace
 if (!  _len) {
 this.allCheckCityShowList.push(_msgObj)
 this.waiting = false
 } else {
 this.allCheckCityShowList.forEach((item, idx) => {
 if (item.province === _province) {
 this.$set(this.allCheckCityShowList, idx, _msgObj)
 this.waiting = false
 return
 }
 })
 }
 }

I have already mentioned it. The specific explanation is in the notes. Please leave a message if you have any questions ~