vue iview/elementUi实现城市多选

城市多选组件

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

页面展示如图：

上代码~~~

模板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-sel section ' style=' width :200 px ' v-model='省份'占位符='全部@ on-change=“更换车辆”选项v-for=“省列表”中的项目：值=' item。id ' :键='项。id“{ item。regionname } }/Option/Select span class=' TM-mil-sel section-all-BTN TM-mil-ml20 TM-mil-colB ' @ click=' choose all region '全选/span div class=' TM-mil-line-loading ' v-if='省份！城市名单。长度' img src=' http :/资产/装载。gif ' alt=' '/div class=' TM-mil-mb20 ' v-if='城市列表。“长度”复选框组样式=“p 336010 px的边距；宽度：900 px ' v-model=' checkCity ' checkCity v-for='城市列表中的项目' : key='项目。id ' :标签='项目。区域代码“{ item。regionname } }/Checkbox/Checkbox组按钮v-show='城市列表。length ' size=' small ' style=' marginto p 336010 px ' @ click=' save checkCity '确定/Button/div/div p class=' TM-mil-city-title TM-mil-mb20 '已选择的地区/p div class=' TM-mil-line-loading ' v-if=' waiting ' img src=' http :/资产/装载。gif ' alt=' '/div class=' TM-mil-choose-district ' v-else div v-for='(item，idx)all checkcity show list ' : key=' idx ' span class=' TM-mil-colB ' { { ProvingsFilter(item。省份)} }/span class=' TM-mil-ml10 ' v-for='(obj，indx)在item中。城市列表' 3360 key=' indx ' { obj } }/span ' all checkcity show list . length '全部地区/span/div/div/模板注：选择/选择/复选框组/复选框组都是接口的组件，详情请看接口官网，同理elementUi也有相同的组件

接口官网

elementUi官网

data(){ return { wait : false，//正在加载省份： ' '，//当前的省provinceList: []，//省列表市政： [{id: 2，name: '北京}，{id: 3，name: '天津}，{id: 10，name: '上海}，{id: 23，name: '重庆}，{id: 2，name: '北京'}], //直辖市cityList: []，//城市列表练习题： [],//活动时间checkcity 3360[]，//当前省所选的市列表-展示allCheckCityApi: []，//所有的市列表-接口allCheckCitySave: { //存储所有选择各省对应的市列表-存储//' 10001 ' :[{代码： ' 10111 '，名称： '北京}] }，allCheckCityShowList: [ //存储所有选择的市列表-展示//{省份： ' 10001 '，城市列表： ['上海', 2, 3]} ] } },函数：

//获取省级数据getOrigin(){ this。axios。get(`/用户/打开/区域/topregions `).然后(RES={ if(RES . status===200){ this。省份列表=RES . data } })}//返回省名称省过滤器(id){ 0返回这个。省列表。过滤器(项目=项目。id===id)[0].regionName } //选择全部地区chooseAllRegion() { this。省份=0这个。城市列表=[]这个。check city=[]这个。all checkcity API=[]这个。all checkcity save=[]this。all checkcity showlist=[]}//保存城市后存储数据-接口handlesavetinglist(){ let _ arr=[]for(在本例中为var键。all checkcity save){ _ arr=_ arr。concat(这个。all checkcity save[key])}这个。all checkcity API=_ arr }//更改省changeProvince(parentId) { if(！parentId){ return }这个。城市列表=[]//获取该省下的市列表这个。axios。get(`/用户/打开/区域/$ {父id }/子区域`).然后(RES={ if(RES . status===200){ this。城市列表=RES . data } })//处理已经选择的市让_ checkCity=这个。所有检查城市保存[ParentID]| |[]让_检查城市列表=[]_检查城市。foreach(El={ _ checkCity)列表。推(El。regioncode)})这个。checkCity=JSON。解析(JSON。stringify(_ checkCity list))}//保存所选的当前市savechckcity(){//处理选择不同省，保存当前省已选择的投放城市if(！这个。检查城市。length){ return }这个。等待=真/当前城市的省代码let _省份=JSON。解析(JSON。stringify(这个。省))//当前城市的省名称let _provinceName=this .城市。滤镜(El=El。id===_省份)[0]这城市。滤镜(El=El。id===_省)[0]。名称|| '' //已选择城市（代号级别)列表let _arrCheckMsgList=[] //当前选择的城市代码let _ arrCheck=JSON。解析(JSON。stringify(这个。CheckCiTY))_ arrCheck。foreach(El={ let _ obj=this。城市名单。滤镜(_ El=_ El。regioncode===El)[0]//区别市辖区let _ regionName=_ ProvinCe name _ obj。regionName let _ regionLevel=_ obj。regionLevel让obj={ regioncode : El，regionName: _regionName，regionLevel: _regionLevel，parentId: _省份} //让obj={regionCode: el，regionName: _regionName，regionLevel 3: _ regionLevel } _ arrcheckmsglist。推(obj)//存储到当前省对应的已选择的市列表-存储这个$set(this.allCheckCitySave，_省份，_arrCheckMsgList) //保存城市后存储数据-接口这个。handlesavetinglist()//处理已选择的投放地区数据展示let _arrCheckMsg=[] //处理展示列表-城市名称-直辖市（北京，上海等)选地区时要加上直辖市前缀，如北京市辖区/北京县这个。城市名单。map(obj={ if(_ arrcheck。索引of(obj。regioncode)-1){ _ arrCheckMsg。push(_ ProvinCe name obj。regionname)})let _ msgObj={省份： _省份，城市列表： _ arrCheckMsg } let _ len=this。所有检查城市列表。过滤器(项目=项目。省份===_省份)。长度|| 0 //新增/替换if(！_ len){这个。所有检查城市显示列表。推(_ msgObj)这个。waiting=false } else { this。所有检查城市显示列表。foreach((item，idx)={ if (item。省份==_省份){这个.$set(this.allCheckCityShowList，idx，_ msgObj)this。等待=假返回} })} }已上，具体的解释都在注释里面，有疑问的地方欢迎留言~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。