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 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
JS常用正则表达式总结
Nov 12 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
python中偏函数partial用法实例分析
2015/07/08 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python socket实现简单聊天室
2018/04/01 Python
Python中extend和append的区别讲解
2019/01/24 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2015年派出所工作总结
2015/04/24 职场文书