實現(xiàn)效果

image.png

頁面代碼

    <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="請選擇所在區(qū)" 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>
    //引入省市區(qū)的json數(shù)據(jù)
    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中的數(shù)據(jù)格式

image.png

city.js獲取路徑（百度網(wǎng)盤）

鏈接: https://pan.baidu.com/s/1Ep65o8H0R5g4X5UrYxT39w
提取碼: jimf