vue+elementui地址三级联动，附代码及中国省市区地址json文件

南极一块修炼千年的大冰块

于 2020-11-10 12:06:30 发布

阅读量2.8k

点赞数 2

分类专栏：前端相关 vue element-ui 文章标签：省市区三级联动省市区json文件省市区三级联动 vue省市区

本文链接：https://blog.csdn.net/weixin_42557996/article/details/109595645

版权

前端相关同时被 3 个专栏收录

28 篇文章 2 订阅

订阅专栏

vue

18 篇文章 0 订阅

订阅专栏

element-ui

8 篇文章 0 订阅

订阅专栏

没什么难的东西，也没有复杂的逻辑，但是重新写可能费时间，贴出代码给大家工作中参考（复制粘贴）一下吧。

template代码

<el-form-item label="选择地址" label-width="100px" prop="province">
	<section class="address-select-list">
		<el-select class="adress-select" v-model="formAddressData.province" 
				   placeholder="请选择省" @change="chooseProvince">
			<el-option v-for="item in provinceData" :key="item.code"
                       :label="item.name" :value="item.name"></el-option>
        </el-select>
		<el-select class="adress-select" v-model="formAddressData.city" 
			   placeholder="请选择市" @change="chooseCity">
			<el-option v-for="item in cityData" :key="item.code"
                       :label="item.name" :value="item.name"></el-option>
        </el-select>
        <el-select class="adress-select" v-model="formAddressData.district" 
        		   placeholder="请选择区">
			<el-option v-for="item in areaData" :key="item.code"
                       :label="item.name" :value="item.name"></el-option>
		</el-select>
    </section>
</el-form-item>
<el-form-item label="详细地址" label-width="100px" prop="address">
	<el-input v-model="formAddressData.address" autocomplete="off" 
		      placeholder="请输入详细地址"></el-input>
</el-form-item>

script代码

data() {
	return {
	    provinceData: [],
	    cityData:[],
	    areaData:[],
	}
},
methods: {
	//打开地址编辑表单
	changeAddressFromVisible() {
	    axios.get('/json/chinaCity.json?v=fb7cdj390d').then((res) => {
	        this.initAddressFrom(res.data)
	        this.addressFromVisible = true;
	    }).catch((error) => {
	        console.log(error)
	    });
	},
	// 选择省
	chooseProvince(value) {
	    if (value == '香港特别行政区') {
	        this.selectCityDisabled = true
	    } else {
	        this.selectCityDisabled = false
	    }
	    this.cityData = [];
	    this.areaData = [];
	    this.formAddressData.city = '';
	    this.formAddressData.district = '';
	    this.provinceData.map(e => {
	        if (value == e.name) {
	            this.cityData = e.cityList;
	            return;
	        }
	    })
	},
	// 选择市
	chooseCity(value) {
	    this.formAddressData.district = '';
	    this.cityData.map(e => {
	        if (value == e.name) {
	            this.areaData = e.areaList;
	            return;
	        }
	    })
	},
	//初始化表单信息
	initAddressFrom(data){
	    this.provinceData = data;
	    this.provinceData.map(e => {
	        if (this.formAddressData.province == e.name) {
	            this.cityData = e.cityList;
	        }
	    })
	    this.cityData.map(e => {
	        if (this.formAddressData.city == e.name) {
	            this.areaData = e.areaList;
	        }
	    })
	},
}