element 框架实现省市二级联动本地JSON

最新推荐文章于 2024-09-05 03:22:27 发布

一道彩虹两个人

最新推荐文章于 2024-09-05 03:22:27 发布

阅读量854

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/jyin_/article/details/105536493

版权

本文详细介绍了如何在Vue.js项目中利用Element UI组件库，结合本地JSON数据，实现省市区三级联动的效果。通过监听选择事件，动态加载下级选项，为前端开发提供了一个实用的解决方案。

摘要由CSDN通过智能技术生成

这里写自定义目`在这里插入代码片`录标题

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<div id="app">
   <div class="block">
    <span class="demonstration">全国省/市</span>
    <el-cascader v-model="value" :options="options" separator='-' filterable clearable></el-cascader>
   </div>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
  new Vue({
   
   el: '#app',
   data() {
   
    return {
   
     value: [],
     options: []
    }
   },
   mounted() {
   
    this.provinces()
   },
   methods: {
   
    provinces() {
   
     axios.get('Provinces.json')
      .then(res => (
       this.options = res.data
      ))
      .catch(function(error) {
    // 请求失败处理
       console.log(error);
      });
    }
   }
  })
 </script>

//省市二级联动JSON
[
  {
   
    "value": 1,
    "label": "北京市",
    "children": [
      {
   
        "value": 383,
        "label": "东城区"
      },
      {
   
        "value": 384,
        "label": "西城区"
      },
      {
   
        "value": 385,
        "label": "崇文区"
      },
      {
   
        "value": 386,
        "label": "宣武区"
      },
      {
   
        "value": 387,
        "label": "朝阳区"
      },
      {
   
        "value": 388,
        "label": "丰台区"
      },
      {
   
        "value": 389,
        "label": "石景山区"
      },
      {
   
        "value": 390,
        "label": "海淀区"
      },
      {
   
        "value": 391,
        "label": "门头沟区"
      },
      {
   
        "value": 392,
        "label": "房山区"
      },
      {
   
        "value": 393,
        "label": "通州区"
      },
      {
   
        "value": 394,
        "label": "顺义区"
      },
      {
   
        "value": 395,
        "label": "昌平区"
      },
      {
   
        "value": 396,
        "label": "大兴区"
      },
      {
   
        "value": 397,
        "label": "怀柔区"
      },
      {
   
        "value": 398,
        "label": "平谷区"
      },
      {
   
        "value": 399,
        "label": "密云县"
      },
      {
   
        "value": 400,
        "label": "延庆县"
      }
    ]
  },
  {
   
    "value": 2,
    "label": "天津市",
    "children": [
      {
   
        "value": 401,
        "label": "和平区"
      },
      {
   
        "value": 402,
        "label": "河东区"
      },
      {
   
        "value": 403,
        "label": "河西区"
      },
      {
   
        "value": 404,
        "label": "南开区"
      },
      {
   
        "value": 405,
        "label": "河北区"
      },
      {
   
        "value": 406,
        "label": "红桥区"
      },
      {
   
        "value": 407,
        "label": "塘沽区"
      },
      {
   
        "value": 408,
        "label": "汉沽区"
      },
      {
   
        "value": 409,
        "label": "大港区"
      },
      {
   
        "value": 410,
        "label": "东丽区"
      },
      {
   
        "value": 411,
        "label": "西青区"
      },
      {
   
        "value": 412,
        "label": "津南区"
      },
      {
   
        "value": 413,
        "label": "北辰区"
      },
      {
   
        "value": 414,
        "label": "武清区"
      },
      {
   
        "value": 415,
        "label": "宝坻区"
      },
      {
   
        "value": 416,
        "label": "宁河县"
      },
      {
   
        "value": 417,
        "label": "静海县"
      },
      {
   
        "value": 418,
        "label": "蓟　县"
      }
    ]
  },
  {
   
    "value": 3,
    "label": "上海市",
    "children": [
      {
   
        "value": 419,
        "label": "黄浦区"
      },
      {
   
        "value": 420,
        "label": "卢湾区"
      },
      {
   
        "value": 421,
        "label": "徐汇区"
      },
      {
   
        "value": 422,
        "label": "长宁区"
      },
      {
   
        "value": 423,
        "label": "静安区"
      },
      {
   
        "value": 424,
        "label": "普陀区"
      },
      {
   
        "value": 425,
        "label": "闸北区"
      },
      {
   
        "value": 426,
        "label": "虹口区"
      },
      {
   
        "value": 427,
        "label": "闵行区"
      },
      {
   
        "value": 428,
        "label": "宝山区"
      },
      {
   
        "value": 429,
        "label": "嘉定区"
      },
      {
   
        "value": 430,
        "label": "浦东新区"
      },
      {
   
        "value": 431,
        "label": "金山区"
      },
      {
   
        "value": 432,
        "label": "松江区"
      },
      {
   
        "value": 433,
        "label": "青浦区"
      },
      {
   
        "value": 434,
        "label": "奉贤区"
      },
      {
   
        "value": 435,
        "label": "崇明县"
      },
      {
   
        "value": 436,
        "label": "杨浦区"
      }
    ]
  },
  {
   
    "value": 4,
    "label": "重庆市",
    "children": [
      {
   
        "value": 367,
        "label": "重庆"
      }
    ]
  },
  {
   
    "value": 5,
    "label": "河北省",
    "children": [
      {
   
        "value": 109,
        "label": "石家庄"
      },
      {
   
        "value": 110,
        "label": "保定"
      },
      {
   
        "value": 111,
        "label": "承德"
      },
      {
   
        "value": 112,
        "label": "沧州"
      },
      {
   
        "value": 113,
        "label": "衡水"
      },
      {
   
        "value": 114,
        "label": "邯郸"
      },
      {
   
        "value": 115,
        "label": "廊坊"
      },
      {
   
        "value": 116,
        "label": "秦皇岛"
      },
      {
   
        "value": 117,
        "label": "唐山"
      },
      {
   
        "value": 118,
        "label": "邢台"
      },
      {
   
        "value": 119,
        "label": "张家口"
      }
    ]
  },
  {
   
    "value": 6,
    "label": "山西省",
    "children": [
      {
   
        "value": 272,
        "label": "太原"
      },
      {
   
        "value": 273,
        "label": "长治"
      },
      {
   
        "value": 274,
        "label": "大同"
      },
      {
   
        "value": 275,
        "label": "晋城"
      },
      {
   
        "value": 276,
        "label": "晋中"
      },
      {
   
        "value": 277,
        "label": "临汾"
      },
      {
   
        "value": 278,
        "label": "吕梁"
      },
      {
   
        "value": 279,
        "label": "朔州"
      },
      {
   
        "value": 280,
        "label": "忻州"
      },
      {
   
        "value":