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

2020-06-12 21:07:55易采站长站整理

本文介绍了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>