vue+iview/elementUi实现城市多选


Posted in Javascript onMarch 28, 2019

城市多选组件

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

页面展示如图:

vue+iview/elementUi实现城市多选

vue+iview/elementUi实现城市多选

vue+iview/elementUi实现城市多选

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS隐藏参数post传值实例
Apr 18 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
一分钟理解js闭包
May 04 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
TypeScript开发Node.js程序的方法
Apr 30 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
vue全屏事件开发详解
Jun 17 Javascript
vue实现购物车加减
May 30 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 #Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 #Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 #Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 #Javascript
详解Vue.directive 自定义指令
Mar 27 #Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 #Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 #Javascript
You might like
PHP数据库开发知多少
2006/10/09 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
javascript第一课
2007/02/27 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
Python进行数据提取的方法总结
2016/08/22 Python
Python3爬虫全国地址信息
2019/01/05 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
利用python实现逐步回归
2020/02/24 Python
python字典与json转换的方法总结
2020/12/28 Python
学校三八妇女节活动情况总结
2014/03/09 职场文书
学雷锋倡议书
2015/01/19 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS