铁雪资源网 Design By www.gsvan.com
城市多选组件
最近收到了一个需求,管理系统需要上线一个活动,但是活动是根据地区上线的,最小范围到市,于是有了下面这个组件
页面展示如图:
上代码~~~
<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="/UploadFiles/2021-04-02/loading.gif">注: <Select></Select>/<CheckboxGroup></CheckboxGroup>都是iview的组件,详情请看iview官网,同理elementUi也有相同的组件
iview官网
elementUi官网
data() { return { waiting: false, // loading province: '', // 当前的省 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 = 0 this.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 // 当前城市的省code let _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 = [] // 当前选择的城市code let _arrCheck = JSON.parse(JSON.stringify(this.checkCity)) _arrCheck.forEach(el => { let _obj = this.cityList.filter(_el => _el.regionCode === el)[0] // 区别市辖区 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) }) // 存储到当前省对应的已选择的市列表 -- 存储 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 = false return } }) } }已上,具体的解释都在注释里面,有疑问的地方欢迎留言~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无vue+iview/elementUi实现城市多选的评论...