vue + elementUI实现省市县三级联动的方法示例


Posted in Javascript onOctober 29, 2019

本文介绍了vue + elementUI实现省市县三级联动的方法示例,分享给大家,具体如下:

 vue + elementUI实现省市县三级联动的方法示例

1、首先需要准备省市县json文件,网上有很多可以下载。项目中使用的city.json数据是这样的格式:

[
 {
  "value": "110000",
  "label": "北京市",
  "children": [
   {
    "value": "110000",
    "label": "北京市",
    "children": [
     {
      "value": "110101",
      "label": "东城区"
     },
     {
      "value": "110102",
      "label": "西城区"
     },
     {
      "value": "110105",
      "label": "朝阳区"
     },
     {
      "value": "110106",
      "label": "丰台区"
     },
     {
      "value": "110107",
      "label": "石景山区"
     },
     {
      "value": "110108",
      "label": "海淀区"
     },
     {
      "value": "110109",
      "label": "门头沟区"
     },
     {
      "value": "110111",
      "label": "房山区"
     },
     {
      "value": "110112",
      "label": "通州区"
     },
     {
      "value": "110113",
      "label": "顺义区"
     },
     {
      "value": "110114",
      "label": "昌平区"
     },
     {
      "value": "110115",
      "label": "大兴区"
     },
     {
      "value": "110116",
      "label": "怀柔区"
     },
     {
      "value": "110117",
      "label": "平谷区"
     },
     {
      "value": "110118",
      "label": "密云区"
     },
     {
      "value": "110119",
      "label": "延庆区"
     }
    ]
   }
  ]
 },
 {
  "value": "120000",
  "label": "天津市",
  "children": [
   {
    "value": "120000",
    "label": "天津市",
    "children": [
     {
      "value": "120101",
      "label": "和平区"
     },
     ......

2、创建一个组件开始写代码

<template>
 <div class="linkage">
  <div>
   <el-select v-model="selectProvince" filterable size="small" @change="selectProvinceFun($event)" placeholder="请选择省份">
    <el-option value="" label="请选择省份"></el-option>
    <el-option :value="item" :label="item.label" v-for="(item, index) in city" :key="index"></el-option>
   </el-select>
  </div>
  <div>
   <el-select v-model="selectCity" filterable size="small" @change="selectCityFun($event)" placeholder="请选择城市">
    <el-option value="" label="请选择城市"></el-option>
    <el-option :value="item" :label="item.label" v-for="(item, index) in cityList" :key="index"></el-option>
   </el-select>
  </div>
  <div>
   <el-select v-model="selectArea" filterable size="small" @change="selectAreaFun($event)" placeholder="请选择区县">
    <el-option value="" label="请选择区县"></el-option>
    <el-option :value="item" :label="item.label" v-for="(item, index) in areaList" :key="index"></el-option>
   </el-select>
  </div>
 </div>
</template>
<script>
import city from '@/assets/json/city.json'
export default {
 name: 'linkage',
 data () {
  return {
   // 整个省市县数据
   city: city,
   // 被选中的市数据
   cityList: [],
   // 被选中的县数据
   areaList: [],
   selectProvince: {},
   selectCity: {},
   selectArea: {}
  }
 },
 mounted () {
 },
 methods: {
  // 省份 市 县联动
  selectProvinceFun (event) {
   console.log(event)
   if (event) {
    this.cityList = event.children
   } else {
    this.cityList = []
   }
   this.areaList = []
   this.$emit('getLawyerListInfo', [event.label, 'province'])
  },
  selectCityFun (event) {
   console.log(event)
   if (event) {
    this.areaList = event.children
   } else {
    this.areaList = []
   }
   this.$emit('getLawyerListInfo', [event.label, 'city'])
  },
  selectAreaFun (event) {
   console.log(event)
   this.$emit('getLawyerListInfo', [event.label, 'area'])
  }
 }
}
</script>
<style lang="scss" scoped>
 .linkage {
  display: flex;
  div {
   margin-right: 5px;
  }
 }
</style>

总结:整个过程很简单,就是在选中省的时候获取他的所有children节点数据(市)在选择市的时候获取她的所有children节点数据(区县)

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

Javascript 相关文章推荐
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue 强制组件重新渲染(重置)的两种方案
Oct 29 #Javascript
javascript实现简单打字游戏
Oct 29 #Javascript
简单使用webpack打包文件的实现
Oct 29 #Javascript
vue 解决异步数据更新问题
Oct 29 #Javascript
VUE实现强制渲染,强制更新
Oct 29 #Javascript
js实现贪吃蛇小游戏
Oct 29 #Javascript
浅谈vue异步数据影响页面渲染
Oct 29 #Javascript
You might like
程序员编程十条戒律
2009/07/09 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
前端性能优化及技巧
2016/05/06 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
vue内置指令详解
2018/04/03 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
python实现QQ批量登录功能
2019/06/19 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Python hashlib模块实例使用详解
2019/12/24 Python
使用python turtle画高达
2020/01/19 Python
python 图像增强算法实现详解
2021/01/24 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
护理专业推荐信
2013/11/07 职场文书
个人融资协议书
2014/10/02 职场文书
警示教育片观后感
2015/06/17 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
让文件路径提取变得更简单的Python Path库
2021/05/27 Python