使用vue2实现带地区编号和名称的省市县三级联动效果


Posted in Javascript onNovember 05, 2018

我们知道省市区县都有名称和对应的数字唯一编号,使用编号可以更方便查询以及程序处理,我们今天来了解一下使用vue2来实现常见的省市区下拉联动选择效果。

准备数据源

我们的省市区县的数据源来自本站文章 《基于Vue2的简易的省市区县三级联动组件》 中的districts.js,感谢 v-distpicker 作者。districts.js中的数据格式大概是这样的:

export default {
 100000: {
 110000: '北京市',
 120000: '天津市',
 130000: '河北省',
 140000: '山西省',
 ...
 },
 130000: {
 130100: '石家庄市',
 130200: '唐山市',
 130300: '秦皇岛市',
 130400: '邯郸市',
 ...
 },
 130100: {
 130102: '长安区',
 130104: '桥西区',
 130105: '新华区',
 130107: '井陉矿区',
 ...
 },
 ...
}

很显然,districts.js导出的是一个key:value形式的json数据串,那么在js中我们就可以很方便的处理json数据串中的关系。

构建项目

我们使用vue-cli构建项目,需要安装node和vue环境。然后命令行运行: vue init webpack distpicker 构建好项目工程。具体如何操作的请参照vue官网,这些基础的本文不细讲。

现在我们直接编辑App.vue文件。

<template>
 <div id="app" class="container">
 <div class="demo form-inline">
  <select name="province" class="form-control" v-model="province.code" @change="getCitys">
   <option value="">选择省份</option>
   <option v-for="(item, index) in provinceList"
    :value="index"
    :key="index">
   {{ item }}
   </option>
  </select>
  <select name="city" class="form-control" v-show="showcitys" v-model="city.code" @change="getAreas">
   <option value="">选择城市</option>
   <option v-for="(item, index) in cityList"
    :value="index"
    :key="index">
   {{ item }}
   </option>
  </select>
  <select name="area" class="form-control" v-show="showareas" v-model="area.code" @change="getDistValue">
   <option value="">选择区县</option>
   <option v-for="(item, index) in areaList"
    :value="index"
    :key="index">
   {{ item }}
   </option>
  </select>
  <button class="btn btn-info" @click="getSelectVal">获取选中值</button>
  <div style="margin-top:20px;color:red">{{selected}}</div>
 </div>
 </div>
</template>

这是一个简单三个下拉选择器模板,使用 v-model 可以设置默认值, @change 当下拉选择选项后触发的事件。然后每个 select 下的 option 是读取districts.js对应的数据。

JS代码

我们现在来看JS部分,首先使用import导入省市区县数据,注意我们把districts.js文件放在项目的src目录下,然后定义默认编号100000,因为我们第一个(省级)选择框默认要下拉显示所有的省/自治区/直辖市。然后在 data()部分设置变量。最后把 created()methods 部分的代码加上,完整的代码如下:

import DISTRICTS from './districts';
const DEFAULT_CODE = 100000;
export default {
 name: 'App',
 data() {
  return {
   showcitys: false,
   showareas: false,
   selected: '',
   defaultProvince: '湖南省',
   defaultCity: '长沙市',
   defaultArea: '岳麓区',
   province: {},
   city: {},
   area: {},
   provinceList: [],
   cityList: [],
   areaList: []
  }
 },
 created() {
  this.provinceList = this.getDistricts();
  this.getDefault();
 },
 
 methods: {
  getDefault() {
   if (this.defaultProvince !== '') {
    this.showcitys = true;
    let provinceCode = this.getAreaCode(this.defaultProvince);
    this.cityList = this.getDistricts(provinceCode);
    this.province = {
     code: provinceCode,
     value: this.defaultProvince
    }
   }
   
   if (this.defaultCity !== '') {
    this.showareas = true;
    let cityCode = this.getAreaCode(this.defaultCity);
    this.areaList = this.getDistricts(cityCode);
    this.city = {
     code: cityCode,
     value: this.defaultCity
    }
   }
 
   if (this.defaultArea !== '') {
    let areaCode = this.getAreaCode(this.defaultArea);
    this.area = {
     code: areaCode,
     value: this.defaultArea
    }
   }
  },
  getSelectVal() {
   this.selected = this.province.value + this.city.value + this.area.value;
   console.log(this.province.code + '-'+ this.city.code + '-' + this.area.code);
  },
  
  //名称转代码
  nameToCode(name) {
   for(let x in DISTRICTS) {
   for(let y in DISTRICTS[x]) {
    if(name === DISTRICTS[x][y]) {
    return y
    }
   }
   }
  },
  //获取区域代码
  getAreaCode(value) {
   if(typeof value === 'string') {
   return this.nameToCode(value);
   }

   return value;
  },
  
  getCodeValue(code, level=1) {
   if (level == 1) { //省级
    return DISTRICTS[DEFAULT_CODE][code];
    
   } else if (level == 2) {
    let provinceCode = this.province.code;
    return DISTRICTS[provinceCode][code];
  
   } else { //
    let cityCode = this.city.code;
    return DISTRICTS[cityCode][code];
   }
  },
  getDistricts(code = DEFAULT_CODE) {
   return DISTRICTS[code] || []
  },
  
  cleanList(name) {
   this[name] = []
  },
  getCitys(e) {
   this.cityList = this.getDistricts(e.target.value);

   this.cleanList('areas')
   this.province = this.setData(e.target.value, 1);
   this.areaList = [];
   this.showareas = false;
   this.showcitys = true;
  },
  getAreas (e) {
   this.areaList = this.getDistricts(e.target.value);
   this.city = this.setData(e.target.value, 2);
   this.showareas = true;
  },
  getDistValue (e) {
   this.area = this.setData(e.target.value, 3);
  },
  setData(code, level = 1) {
   code = parseInt(code);
   return {
    code: code,
    value: this.getCodeValue(code, level),
   }
  },

 }
}

运行

我们需要实现的效果是:默认显示省级下拉选择框,下拉选项中应该默认载入省级名称,然后当选择省级下拉框中的省份列表(省级)选项时,显示选中省份的城市列表(市级),然后选择市级城市选项,显示选择城市的区县列表(县级)。在选择完每个选项时,我们应该即时记录选项对应的编号和名称。如果在 data() 部分设置了省市区县的默认值,则三个下拉框都要显示。

运行 npm run dev ,在浏览器中输入http://localhost:8080查看效果。

效果是实现了,但是如果要在一个页面调用多个三级联动效果则就比较尴尬了,下节我给大家讲述如何把这个三级联动效果封装成vue组件,造好轮子,方便在更多地方调用,敬请关注。

总结

以上所述是小编给大家介绍的使用vue2实现带地区编号和名称的省市县三级联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现延迟加载的方法
Jun 24 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
vue router的基本使用和配置教程
Nov 05 #Javascript
微信小程序tabbar底部导航
Nov 05 #Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 #Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 #Javascript
小程序实现选择题选择效果
Nov 04 #Javascript
小程序实现单选多选功能
Nov 04 #Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 #Javascript
You might like
php封装的连接Mysql类及用法分析
2015/12/10 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
Python实现PS图像调整黑白效果示例
2018/01/25 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python如何使用字符打印照片
2020/01/03 Python
Keras loss函数剖析
2020/07/06 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
学校运动会广播稿
2014/10/11 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
故意杀人案辩护词
2015/05/21 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
关于vue-router-link选择样式设置
2022/04/30 Vue.js