目标：实现如下图所示的省市区三级联动选择组件
1. 新建公共组件文件 global-city文件夹，里面包含组件文件：index.vue，和3个js文件分别装着省市区的code值和名称
2. 组件代码：index.vue
<template><div class="areaSelect flex"><el-select:disabled="disabled"v-model="province":size="size"placeholder="省"@change="changeCode($event,0)"><el-optionv-for="item in provinceList":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-select:disabled="disabled"class="center_select"v-model="city"placeholder="市"@change="changeCode($event,1)"><el-optionv-for="item in cityList":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-select:disabled="disabled"v-model="area"placeholder="区"@change="changeCode($event,2)"><el-optionv-for="item in areaList":key="item.value":label="item.label":value="item.value"></el-option></el-select></div></template><script>import provinceData from './province'import cityData from './city'import areaData from './area'export default {name: "EbringCity",props: {size: '',disabled: {size: String,type: Boolean,default: false,},code: {type: Object,default: () => {return {areaCode: "",areaName: "",cityCode: "",cityName: "",provinceCode: "",provinceName: "",};},},},data() {return {province: "",city: "",area: "",provinceList: [],cityList: [],areaList: [],};},watch: {code(val) {if (val.areaName && val.areaName != "") {this.province = val.provinceCode;this.city = val.cityCode;this.area = val.areaCode;this.provinceCity(val.provinceCode);this.cityArea(val.cityCode);} else {this.cityList = []this.areaList = []}},},mounted() {if (this.code.areaName && this.code.areaName != "") {this.province = this.code.provinceCode;this.city = this.code.cityCode;this.area = this.code.areaCode;this.provinceCity(this.code.provinceCode);this.cityArea(this.code.cityCode);}this.getProvince();},methods: {resetArea() {this.province = ""this.city = "";this.area = "";},changeCode(data, type) {if (type == 0) {this.city = "";this.area = "";this.provinceCity(data);}if (type == 1) {this.area = "";this.cityArea(data);}if (this.province != "" && this.city != "" && this.area != "")this.$emit("code",[{code: this.province,name: this.provinceList.find((val) => val.value == this.province).label,},{code: this.city,name: this.cityList.find((val) => val.value == this.city).label,},{code: this.area,name: this.areaList.find((val) => val.value == this.area).label,},] || {provinceCode: this.province,provinceName: this.provinceList.find((val) => val.value == this.province).label,cityCode: this.city,cityName: this.cityList.find((val) => val.value == this.city).label,areaCode: this.area,areaName: this.areaList.find((val) => val.value == this.area).label,});},async getProvince() {let result = [];provinceData.province_data.map((item) => {result.push({label: item.provinceName,value: item.provinceCode,});});this.provinceList = result;// let data = await this.$http.get(this.$api.allProvince.request.url);// let result = [];// data.data.map((item) => {//result.push({// label: item.provinceName,// value: item.provinceCode,//});// });// this.provinceList = result;},async provinceCity(code) {let result = [];cityData.city_data.map((item) => {result.push({label: item.cityName,value: item.cityCode,});});this.cityList = result;// let data = await this.$http.get(//this.$api.provinceCity.request.url,//{// provinceCode: code,//}// );// let result = [];// data.data.map((item) => {//result.push({// label: item.cityName,// value: item.cityCode,//});// });// this.cityList = result;},async cityArea(code) {let result = [];areaData.area_data.map((item) => {result.push({label: item.areaName,value: item.areaCode,});});this.areaList = result;// let data = await this.$http.get(this.$api.cityArea.request.url, {//cityCode: code,// });// let result = [];// data.data.map((item) => {//result.push({// label: item.areaName,// value: item.areaCode,//});// });// this.areaList = result;},},};</script><style>.center_select {margin: 0 10px;}.global_form .areaSelect {width: 70%;} .global_form .areaSelect .el-select {width: 33.33%;} </style>
3. 省 市 区 三个js文件在没有接口的时候可以使用本地code值（这个网上就找得到哦~~，代码太多了就不贴出来啦，不想百度的可以私信发 o ）
省份：province.js
市：city.js
区县：area.js
4. 组件在页面中使用方法如下：
<global-city:code="item.value":disabled="item.disabled":size="layout.size"@code="changeCode($event,item.prop)"v-if="item.type==='city'"ref="selectArea"></global-city>// 省市区选择框改变时，传递出来已选择的值changeCode(data, prop) {this.areaData = data;},// 重置选择框resetForm() {this.$refs.selectArea[0].resetArea() // 清除省市区}
有什么问题的话，欢迎大家留言交流哦~~~ 互相学习，加油鸭
