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 相关文章推荐
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
javascript call方法使用说明
Jan 11 Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
javascript工具库代码
Mar 29 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
Python subprocess模块常见用法分析
2018/06/12 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
浅谈django 重载str 方法
2020/05/19 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
药品促销活动方案
2014/02/14 职场文书
聚美优品的广告词
2014/03/14 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
撤诉申请怎么写
2015/05/19 职场文书
2016新年年会主持词
2015/07/06 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
Java 超详细讲解hashCode方法
2022/04/07 Java/Android