vue + iview/elementUi --城市多選

城市多選組件

最近收到了一個需求，管理系統需要上線一個活動，但是活動是根據地區上線的，最小範圍到市，於是有了下面這個組件
頁面展示如圖：

---

上代碼～～～

<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, // 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
            }
            })
        }
    }

已上，具體的解釋都在註釋裏面，有疑問的地方歡迎留言～