vue实现省市区三级联动

对于前端初学者省市区三级联动是必不可少的，接下来展示代码 后面有主要的实现思路，建议根据思路看代码。加油哦!!!

html部分代码

 <div>
        <el-form :model="ruleForm"  ref="ruleForm" label-width="100px">
            <el-form-item label="城市" prop="area">
                <el-select clearable v-model="ruleForm.province" @change="changeProvince()">
                    <el-option v-for="item in province" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
                <el-select v-model="ruleForm.city"  @change="changeCity()" :disabled="city.length == 0"
                    clearable>
                    <el-option v-for="item in city" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
                <el-select v-model="ruleForm.area"  :disabled="area.length == 0" clearable>
                    <el-option v-for="item in area" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>

js部分代码 ，该部分需要导入一个city.json 我放到后面或者找我要一下，里面包含省市区的数据

import province from "@/city.json";
export default {
    name: "App",
    data() {
        return {
            province: province,//省的数组
            city: [],//市的数组
            area: [],//区的数据
            ruleForm: {
                province: "", //省份
                city: "",  //市
                area: "",   //区
            },
        };
    },
    // 删除的事件
    methods: {
        // 选择省的点击事件
        changeProvince() {
            let _self = this;
            _self.ruleForm.city = "";
            _self.city = [];
            _self.area = [];
            _self.ruleForm.area = "";
            for (let item of _self.province) {
                if (item.code == _self.ruleForm.province) {
                    _self.city = item.children;
                }
            }
        },
        // 选择市的点击事件
        changeCity() {
            let _self = this;
            _self.area = [];
            _self.ruleForm.area = "";
            for (let item of _self.city) {
                if (item.code == _self.ruleForm.city) {
                    _self.area = item.children
                }
            }
        },


    },
};

主要思路

1. 首先，在data中定义了省、市、区的数组，以及用于存储用户选择的省、市、区的ruleForm对象。
2. 在模板部分，通过el-select和el-option组件实现了三级城市选择的下拉菜单。
3. 在changeProvince方法中，当选择省份时，通过遍历省份数组，在匹配的省份下找到城市数组，并更新city数组。
4. 在changeCity方法中，当选择城市时，通过遍历城市数组，在匹配的城市下找到区域数组，并更新area数组。
5. 用户选择省份和城市后，区域选择将根据所选城市的区域数据进行动态渲染。