网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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

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

成都创新互联公司网络公司拥有十余年的成都网站开发建设经验,1000+客户的共同信赖。提供网站设计、做网站、网站开发、网站定制、卖链接、建网站、网站搭建、成都响应式网站建设公司、网页设计师打造企业风格,提供周到的售前咨询和贴心的售后服务

 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、创建一个组件开始写代码




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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


新闻标题:vue+elementUI实现省市县三级联动的方法示例
路径分享:http://bjjierui.cn/article/gogsjj.html

其他资讯