中国地区的四级联动（包含code码）

1、需要引入的数据源address.json

百度网盘：pan.baidu.com/s/1Ti_i0zlr…

提取码：6t2j

2、基本的四级联动html

<template>
    <div>
        <el-form ref="form" :model="form" label-width="120px">
            <el-select v-model="form.province" placeholder="请选择省" @change="changePro">
                <el-option v-for="item in addressData" :key="item.code" :label="item.name" :value="item.name">
                </el-option>
            </el-select>
            <el-select v-model="form.city" placeholder="请选择市" @change="changeCity">
                <el-option v-for="item in cityData" :key="item.code" :label="item.name" :value="item.name">
                </el-option>
            </el-select>
            <el-select v-model="form.district" placeholder="请选择区" @change="changeArea">
                <el-option v-for="item in areaData" :key="item.code" :label="item.name" :value="item.name">
                </el-option>
            </el-select>
            <el-select v-model="form.Jd" placeholder="街道" @change="changeJd">
                <el-option v-for="item in jdData" :key="item.code" :label="item.name" :value="item.name">
                </el-option>
            </el-select>
        </el-form>

        <button @click="data">数据回填</button>
    </div>
</template>

3、具体的js方法如下

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import address from "@/http/address.json";
import request from "@/http/request.js";
export default {
    data() {
        return {
            //  省数据
            addressData: [],
            //  市数据
            cityData: [],
            // 区数据
            areaData: [],
            // 街道数据
            jdData: [],
            // 选中之后的数据

            form: {
                // 具体地址
                address: "",
                // 省
                province: "",
                // 市
                city: "",
                // 区
                district: "",
                // 街道
                Jd: "",
                // 具体到区的code码
                regionalNumber: "", //地址区域码
                // 到街道的code码
                code: "",
            },
        };
    },
    created() {
        // 获取数据
        this.addressData = address;

        console.log(this.addressData);
    },
    methods: {
        data() {
            request
                .get("/task_expense/frontPageInfo/")
                .then((res) => {
                    console.log(res);
                })
                .catch((err) => {
                    console.log(err);
                });
            //如果直辖市对市区做判断不显示市辖区或者县
            if (this.form.city === "市辖区" || "县") {
                this.form.address = `${
                    this.form.province + this.form.district + this.form.Jd
                }`;
            } else {
                this.form.address = `${
                    this.form.province +
                    this.form.city +
                    this.form.district +
                    this.form.Jd
                }`;
            }
            console.log(this.form);
        },

        // 省份更改
        changePro(e) {
            console.log("省", e);
            // 从省中过滤出市的数据
            this.cityData = this.addressData.filter((item) => {
                return item.name == e;
            })[0].children;
            // 省发生改变的时候清空输入框市区街道的内容
            this.form.district = "";
            this.form.city = "";
            this.form.Jd = "";
            // 省发生该表的时候清空区街道数据的内容
            this.areaData = [];
            this.jdData = [];
        },
        // 市更改
        changeCity(e) {
            console.log("市", e);
            // 获取到区的数据
            this.areaData = this.cityData.filter(
                (item) => item.name == e
            )[0].children;
            // 清空数据后面对应数组的数据
            this.form.district = "";
            this.form.Jd = "";
            this.jdData = [];
        },
        // 区更改
        changeArea(e) {
            console.log("区", e);
            let temp = this.areaData.filter((item) => item.name == e);
            // 获取到区的code码
            this.form.regionalNumber = temp[0].code;
            // 获取到街道的数据
            this.jdData = this.areaData.filter(
                (item) => item.name == e
            )[0].children;
            // 清空街道的输入框内容
            this.form.Jd = "";
            // console.log(temp[0]);
        },
        // 街道更改
        changeJd(e) {
            console.log("街道", e);
            let tempData = this.jdData.filter((item) => item.name == e);
            // 获取到街道的code码
            this.form.code = tempData[0].code;
        },
    },
};
</script>

4、效果图