1. Cascading selection
Description: After selecting a province, the data of the city will appear. If the province is not selected, the data of the city will be empty.
(2) The api interface is as follows, and the data of the city can be searched through the pcod parameter
:
Ideas: 1. Bind the change event in the selection box, which is used as a continuous event; 2. Call the interface in mounted to get all the data in the province, and then render it on the page; 3. In the function of the change event, Call the original interface to obtain provincial data, and then pass in the pcode parameter to obtain the corresponding city data
<table>
<tr v-for="(item,index) in list" :key="index">
<td>
<el-select v-model="formData.province"
@change="provinceChange"
clearable
placeholder="请选择省"
style="margin-right:5px;"
>
<el-option
v-for="item in provinceList"
:key="item.areaCode"
:label="item.name"
:value="item.areaCode">
</el-option>
</el-select>
<el-select
v-model="formDatacity.city"
placeholder="请选择市"
style="margin-right:5px;"
clearable>
<el-option
v-for="item in cityList"
:key="item.areaCode"
:label="item.name"
:value="item.areaCode"
>
</el-option>
</el-select>
<span class="buttonspan" @click="del(index)">-</span>
</td>
</tr>
</table>
js part
//data中的数据
data() {
return {
//省份数据
formData:{
province:'',//省
city:'',//市
shortName:'',
areaCode:'',
},
//存放市数据
formDatacity:{
areaCode: '',
cityCode: "",
id: '',
lat: "",
level: 1,
lng: "",
mergerName: "",
name: "",
parentCode: '',
pinyin: "",
shortName: "",
zipCode: ''
},
provinceList: [],
cityList:null,
value1 : "",
label1:"",
//
cityList: [],
value2 : "",
label2:"",
list:[
{
provinceList: [],
city: []
}
],
}
},
mounted(){
this.getProvince();
},
methods:{
//获取市数据
getProvince() {
// 如果本地有省份数据缓存就取缓存，没有则调接口
const cacheProvince = sessionStorage.getItem('cacheProvince');
if (cacheProvince) {
this.provinceList = JSON.parse(cacheProvince)
} else {
this.$axios(urlObj.searchLocation).then(res => {
if (res.code) return
this.provinceList = res.data
this.formData = res
sessionStorage.setItem('cacheProvince', JSON.stringify(res.data))
})
}
},
// 选择省份之后请求市数据
provinceChange(){
const params = {
"pcode":this.formData.province
}
this.$axios(urlObj.searchLocation,params).then(res => {
this.cityList = res.data
console.log(this.formDatacity)
})
},
}