vue+elementui地址三级联动,附代码及中国省市区地址json文件
没什么难的东西,也没有复杂的逻辑,但是重新写可能费时间,贴出代码给大家工作中参考(复制粘贴)一下吧。template代码<el-form-item label="选择地址" label-width="100px" prop="province"><section class="address-select-list"><el-select class="adress-
·
没什么难的东西,也没有复杂的逻辑,但是重新写可能费时间,贴出代码给大家工作中参考(复制粘贴)一下吧。
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
更多推荐
已为社区贡献6条内容
所有评论(0)