1. Selección en cascada
Descripción: Después de seleccionar una provincia, aparecerán los datos de la ciudad. Si no se selecciona la provincia, los datos de la ciudad estarán vacíos. (2)
La interfaz API es la siguiente y se pueden buscar los datos de la ciudad. a través del parámetro pcode
:
Ideas: 1. Vincular el evento de cambio en el cuadro de selección, que se utiliza como un evento continuo, 2. Llame a la interfaz montada para obtener todos los datos en la provincia y luego representarlos en la página, 3. En la función del evento de cambio, llame a la interfaz original para obtener datos provinciales y luego pase el parámetro pcode para obtener los datos de la ciudad correspondientes
<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>
parte js
//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)
})
},
}