青岛的做网站公司/免费舆情监测平台

城市多选组件

最近收到了一个需求，管理系统需要上线一个活动，但是活动是根据地区上线的，最小范围到市，于是有了下面这个组件
页面展示如图：

上代码～～～

<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, // loadingprovince: '', // 当前的省provinceList: [], // 省列表Municipality: [{id: 2, name: '北京'}, {id: 3, name: '天津'}, {id: 10, name: '上海'}, {id: 23, name: '重庆'}, {id: 2, name: '北京'}], // 直辖市cityList: [], // 城市列表activityTime: [], // 活动时间checkCity: [], // 当前省所选的市列表  -- 展示allCheckCityApi: [], // 所有的市列表  -- 接口allCheckCitySave: { // 存储所有选择各省对应的市列表 -- 存储// '10001': [{code:'10111', name:'北京'}]},allCheckCityShowList: [ // 存储所有选择的市列表  -- 展示// { province: '10001', cityList: ['上海', 2, 3]}]}},

函数：
请输入代码

// 获取省级数据getOrigin() {this.axios.get(`/users/open/region/topRegions`).then(res => {if (res.status === 200) {this.provinceList = res.data}})}// 返回省名称provinceFilter(id) {return this.provinceList.filter(item => item.id === id)[0].regionName}// 选择全部地区chooseAllRegion() {this.province = 0this.cityList = []this.checkCity = []this.allCheckCityApi = []this.allCheckCitySave = []this.allCheckCityShowList = []}// 保存城市后存储数据 -- 接口handleSaveCityList() {let _arr = []for (var key in this.allCheckCitySave) {_arr = _arr.concat(this.allCheckCitySave[key])}this.allCheckCityApi = _arr}

// 更改省changeProvince(parentId) {if (!parentId) {return}this.cityList = []//获取该省下的市列表this.axios.get(`/users/open/region/${parentId}/subRegions`).then(res => {if (res.status === 200) {this.cityList = res.data}})// 处理已经选择的市let _checkCity = this.allCheckCitySave[parentId] || [] let _checkCityList = []_checkCity.forEach(el => {_checkCityList.push(el.regionCode)})this.checkCity = JSON.parse(JSON.stringify(_checkCityList))}// 保存所选的当前市saveCheckCity() {// 处理选择不同省，保存当前省已选择的投放城市if (!this.checkCity.length) {return}this.waiting = true// 当前城市的省codelet _province = JSON.parse(JSON.stringify(this.province))// 当前城市的省名称let _provinceName = this.Municipality.filter(el => el.id === _province)[0] && this.Municipality.filter(el => el.id === _province)[0].name || ''// 已选择城市(code name level)列表let _arrCheckMsgList = []// 当前选择的城市codelet _arrCheck = JSON.parse(JSON.stringify(this.checkCity))_arrCheck.forEach(el => {let _obj = this.cityList.filter(_el => _el.regionCode === el)[0]// 区别市辖区let _regionName = _provinceName + _obj.regionNamelet _regionLevel = _obj.regionLevellet obj = {regionCode: el, regionName: _regionName, regionLevel: _regionLevel, parentId: _province}// let obj = {regionCode: el, regionName: _regionName, regionLevel: _regionLevel}_arrCheckMsgList.push(obj)})// 存储到当前省对应的已选择的市列表 -- 存储this.$set(this.allCheckCitySave, _province, _arrCheckMsgList)// 保存城市后存储数据 -- 接口this.handleSaveCityList()// 处理已选择的投放地区数据展示let _arrCheckMsg = []// 处理展示列表－城市名称  －－  直辖市（北京，上海等）选地区时要加上直辖市前缀，如  北京市辖区／北京县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// 新增  ／  替换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 = falsereturn}})}}

已上，具体的解释都在注释里面，有疑问的地方欢迎留言～

来源：https://segmentfault.com/a/1190000018677847