省市区级联

实现效果

页面代码

    <template>
      <el-form label-width="120px"  ref="itemFrom" :model="item">
        <el-form-item label="客户地址" prop="residentAddress">
            <div style="display: flex;margin-bottom: 20px;">
                <el-select  v-model="item.province" placeholder="请选择所在省" clearable @change="changeProvince()" >
                    <el-option v-for="(item) in provinceList" :key="item.provinceCode" :value="item.provinceName" :label="item.provinceName" />
                </el-select>
                <el-select   v-model="item.city" placeholder="请选择所在市" clearable   @change="changeCity()">
                    <el-option v-for="(item) in cityList" :key="item.cityCode" :value="item.cityName" :label="item.cityName" />
                </el-select>
                <el-select v-model="item.county" placeholder="请选择所在区" clearable>
                    <el-option v-for="(item) in countyList" :key="item.areaCode" :value="item.areaName" :label="item.areaName" />
                </el-select>
            </div>
            <el-input v-model="item.residentAddress" placeholder="请输入客户详细地址" ></el-input>
        </el-form-item>

      </el-form>
    </template>

    <script>
    //引入省市区的json数据
    const arr = require("@/assets/js/citys.js")
    export default {
        data(){
            return {
                provinceList: arr.citys,
                cityList: [],
                countyList: [],
                item:{}
            }
        },
        methods:{
            changeProvince(){
                if(this.item.province != ''){
                    this.cityList = arr.citys.filter(item => item.provinceName == this.item.province)[0].mallCityList
                }
                this.item = {...this.item,city:''}
            },
            changeCity(){
                if(this.item.city != ''){
                    this.countyList = this.cityList.filter(item => item.cityName == this.item.city)[0].mallAreaList
                 }
                 this.item = {...this.item,county:''}
            },
        }
    }
    </script>

    <style>

    </style>

citys.js中的数据格式

city.js获取路径（百度网盘）

链接: pan.baidu.com/s/1Ep65o8H0… 提取码: jimf