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也有相同的组件

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

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

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