没什么难的东西,也没有复杂的逻辑,但是重新写可能费时间,贴出代码给大家工作中参考(复制粘贴)一下吧。

template代码

<el-form-item label="选择地址" label-width="100px" prop="province">
	<section class="address-select-list">
		<el-select class="adress-select" v-model="formAddressData.province" 
				   placeholder="请选择省" @change="chooseProvince">
			<el-option v-for="item in provinceData" :key="item.code"
                       :label="item.name" :value="item.name"></el-option>
        </el-select>
		<el-select class="adress-select" v-model="formAddressData.city" 
			   placeholder="请选择市" @change="chooseCity">
			<el-option v-for="item in cityData" :key="item.code"
                       :label="item.name" :value="item.name"></el-option>
        </el-select>
        <el-select class="adress-select" v-model="formAddressData.district" 
        		   placeholder="请选择区">
			<el-option v-for="item in areaData" :key="item.code"
                       :label="item.name" :value="item.name"></el-option>
		</el-select>
    </section>
</el-form-item>
<el-form-item label="详细地址" label-width="100px" prop="address">
	<el-input v-model="formAddressData.address" autocomplete="off" 
		      placeholder="请输入详细地址"></el-input>
</el-form-item>

script代码

data() {
	return {
	    provinceData: [],
	    cityData:[],
	    areaData:[],
	}
},
methods: {
	//打开地址编辑表单
	changeAddressFromVisible() {
	    axios.get('/json/chinaCity.json?v=fb7cdj390d').then((res) => {
	        this.initAddressFrom(res.data)
	        this.addressFromVisible = true;
	    }).catch((error) => {
	        console.log(error)
	    });
	},
	// 选择省
	chooseProvince(value) {
	    if (value == '香港特别行政区') {
	        this.selectCityDisabled = true
	    } else {
	        this.selectCityDisabled = false
	    }
	    this.cityData = [];
	    this.areaData = [];
	    this.formAddressData.city = '';
	    this.formAddressData.district = '';
	    this.provinceData.map(e => {
	        if (value == e.name) {
	            this.cityData = e.cityList;
	            return;
	        }
	    })
	},
	// 选择市
	chooseCity(value) {
	    this.formAddressData.district = '';
	    this.cityData.map(e => {
	        if (value == e.name) {
	            this.areaData = e.areaList;
	            return;
	        }
	    })
	},
	//初始化表单信息
	initAddressFrom(data){
	    this.provinceData = data;
	    this.provinceData.map(e => {
	        if (this.formAddressData.province == e.name) {
	            this.cityData = e.cityList;
	        }
	    })
	    this.cityData.map(e => {
	        if (this.formAddressData.city == e.name) {
	            this.areaData = e.areaList;
	        }
	    })
	},
}

上传的省市区json文件下载地址:
https://download.csdn.net/download/weixin_42557996/13140939

Logo

前往低代码交流专区

更多推荐