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实现的自定义的对话框的实现代码
Mar 21 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
vue实现在线翻译功能
Sep 27 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
vue 插槽简介及使用示例
Nov 19 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
PHP 断点续传实例详解
2017/11/11 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
js 目录列举函数
2008/11/06 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
python生成九宫格图片
2018/11/19 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
python tornado使用流生成图片的例子
2019/11/18 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
GC是什么?为什么要有GC?
2013/12/08 面试题
优秀学生获奖感言
2014/02/15 职场文书
师范生求职信
2014/06/14 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
2014年市场部工作总结
2014/11/25 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server
python获取带有返回值的多线程
2022/05/02 Python