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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 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
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
基于Vue实现拖拽功能
2020/07/29 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
详解python3中的真值测试
2018/08/13 Python
简单谈谈python基本数据类型
2018/09/26 Python
Tensorflow 多线程设置方式
2020/02/06 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
建筑工程自我鉴定
2013/10/18 职场文书
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
家长建议怎么写
2014/05/15 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
小学课外阅读总结
2014/07/09 职场文书
个人创业事迹材料
2014/12/30 职场文书
银行求职自荐信范文
2015/03/04 职场文书
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL