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

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

成都创新互联-专业网站定制、快速模板网站建设、高性价比若羌网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式若羌网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖若羌地区。费用合理售后完善，10年实体公司更值得信赖。

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": "和平区"
     },
     ......

分享标题：vue+elementUI实现省市县三级联动的方法示例-创新互联
文章分享：http://cdxtjz.com/article/pcedh.html