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 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
jsPDF导出pdf示例
May 02 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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
桌面中心(三)修改数据库
2006/10/09 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
估算杭州有多少软件工程师
2015/08/11 面试题
寒假实习自荐信
2014/01/26 职场文书
2014村务公开实施方案
2014/02/25 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
婚礼答谢词范文
2015/09/29 职场文书
深入理解python协程
2021/06/15 Python