vue + element-ui 实现省市区三级联动选择组件

目标：实现如下图所示的省市区三级联动选择组件

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-option
                v-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-option
                v-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-option
                v-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()  // 清除省市区
}

有什么问题的话，欢迎大家留言交流哦~~~ 互相学习，加油鸭