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引导程序
Oct 26 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
vue中注册自定义的全局js方法
Nov 15 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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
List Installed Software Features
2007/06/11 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python实现控制台打印的方法
2019/01/12 Python
python如何使用代码运行助手
2020/07/03 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
密封类可以有虚函数吗
2014/08/11 面试题
如何利用find命令查找文件
2016/11/18 面试题
毕业生自荐书
2014/02/03 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
安全生产月标语
2014/10/07 职场文书
采购员岗位职责范本
2015/04/07 职场文书