vue+iview/elementUi實(shí)現(xiàn)城市多選
城市多選組件
最近收到了一個(gè)需求,管理系統(tǒng)需要上線一個(gè)活動(dòng),但是活動(dòng)是根據(jù)地區(qū)上線的,最小范圍到市,于是有了下面這個(gè)組件
頁(yè)面展示如圖:
上代碼~~~
<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">已選擇的地區(qū)</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">全部地區(qū)</span> </div> </div> </template>
注: <Select></Select>/<CheckboxGroup></CheckboxGroup>都是iview的組件,詳情請(qǐng)看iview官網(wǎng),同理elementUi也有相同的組件
data() { return { waiting: false, // loading province: '', // 當(dāng)前的省 provinceList: [], // 省列表 Municipality: [{id: 2, name: '北京'}, {id: 3, name: '天津'}, {id: 10, name: '上海'}, {id: 23, name: '重慶'}, {id: 2, name: '北京'}], // 直轄市 cityList: [], // 城市列表 activityTime: [], // 活動(dòng)時(shí)間 checkCity: [], // 當(dāng)前省所選的市列表 -- 展示 allCheckCityApi: [], // 所有的市列表 -- 接口 allCheckCitySave: { // 存儲(chǔ)所有選擇各省對(duì)應(yīng)的市列表 -- 存儲(chǔ) // '10001': [{code:'10111', name:'北京'}] }, allCheckCityShowList: [ // 存儲(chǔ)所有選擇的市列表 -- 展示 // { province: '10001', cityList: ['上海', 2, 3]} ] } },
函數(shù):
// 獲取省級(jí)數(shù)據(jù) 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 } // 選擇全部地區(qū) chooseAllRegion() { this.province = 0 this.cityList = [] this.checkCity = [] this.allCheckCityApi = [] this.allCheckCitySave = [] this.allCheckCityShowList = [] } // 保存城市后存儲(chǔ)數(shù)據(jù) -- 接口 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 } }) // 處理已經(jīng)選擇的市 let _checkCity = this.allCheckCitySave[parentId] || [] let _checkCityList = [] _checkCity.forEach(el => { _checkCityList.push(el.regionCode) }) this.checkCity = JSON.parse(JSON.stringify(_checkCityList)) } // 保存所選的當(dāng)前市 saveCheckCity() { // 處理選擇不同省,保存當(dāng)前省已選擇的投放城市 if (!this.checkCity.length) { return } this.waiting = true // 當(dāng)前城市的省code let _province = JSON.parse(JSON.stringify(this.province)) // 當(dāng)前城市的省名稱 let _provinceName = this.Municipality.filter(el => el.id === _province)[0] && this.Municipality.filter(el => el.id === _province)[0].name || '' // 已選擇城市(code name level)列表 let _arrCheckMsgList = [] // 當(dāng)前選擇的城市code let _arrCheck = JSON.parse(JSON.stringify(this.checkCity)) _arrCheck.forEach(el => { let _obj = this.cityList.filter(_el => _el.regionCode === el)[0] // 區(qū)別市轄區(qū) 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) }) // 存儲(chǔ)到當(dāng)前省對(duì)應(yīng)的已選擇的市列表 -- 存儲(chǔ) this.$set(this.allCheckCitySave, _province, _arrCheckMsgList) // 保存城市后存儲(chǔ)數(shù)據(jù) -- 接口 this.handleSaveCityList() // 處理已選擇的投放地區(qū)數(shù)據(jù)展示 let _arrCheckMsg = [] // 處理展示列表-城市名稱 -- 直轄市(北京,上海等)選地區(qū)時(shí)要加上直轄市前綴,如 北京市轄區(qū)/北京縣 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 } }) } }
已上,具體的解釋都在注釋里面,有疑問的地方歡迎留言~
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮
這篇文章主要為大家詳細(xì)介紹了Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11vue封裝自定義指令之動(dòng)態(tài)顯示title操作(溢出顯示,不溢出不顯示)
這篇文章主要介紹了vue封裝自定義指令之動(dòng)態(tài)顯示title操作(溢出顯示,不溢出不顯示),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04解決vue項(xiàng)目跳轉(zhuǎn)同樣的頁(yè)面不刷新的問題思路詳解
做公司官網(wǎng)項(xiàng)目的時(shí)候遇到的場(chǎng)景,頂部導(dǎo)航欄分類商品跳轉(zhuǎn)到分類詳情,然后在分類詳情再次點(diǎn)擊頂部導(dǎo)航欄里另外的分類商品,跳到同樣的頁(yè)面數(shù)據(jù)不刷新,下面小編給大家分享解決方式,關(guān)于vue跳轉(zhuǎn)不刷新問題感興趣的朋友一起看看吧2023-09-09vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05解決基于 keep-alive 的后臺(tái)多級(jí)路由緩存問題
這篇文章主要介紹了解決基于 keep-alive 的后臺(tái)多級(jí)路由緩存問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12vue?動(dòng)態(tài)添加el-input的實(shí)現(xiàn)邏輯
這篇文章主要介紹了vue?動(dòng)態(tài)添加el-input的實(shí)現(xiàn)代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06