后台数据省市区是一个层级的 ,因此根据后台参数areaLevel进行区分联动。
使用for循环加push实现省市区三级内容的显示。
1.页面代码
<van-field
v-model="bookingaddress"
label="查勘地点"
required
is-link
arrow-direction="down"
placeholder="请选择查勘地点"
@click="show = true"
@click-icon="relationPicker"
@click-input="relationPicker"
/>
<van-popup v-model="showSelectList" round position="bottom" width="100%">
<van-cascader
v-model="cascaderValue"
title="请选择查勘地点"
:options="options"
@close="showSelectList = false"
@finish="onFinish"
@change="onChange"
/>
</van-popup>
2.methods写方法
onChange({ value }) {
console.log(value, 'value');
// 点击当前显示的市级列表
var deomlist = []
// 点击当前显示的区级列表
var mindeomlist = []
var that = this
// 点击获取对应下级地址 this.selectList 代表后台返回的地址数据
for (let index = 0; index < this.selectList.length; index++) {
if (this.selectList[index].parentCode == value && this.selectList[index].areaLevel == 2) {
// if (deomlist) {
deomlist.push(this.selectList[index])
// }
} else if (this.selectList[index].parentCode == value && this.selectList[index].areaLevel == 3) {
mindeomlist.push(this.selectList[index])
}
}
// 市级显示
for (let index = 0; index < that.options.length; index++) {
if (that.options[index].value == value) {
that.options[index].children = []
for (let list = 0; list < deomlist.length; list++) {
that.options[index].children.push({text: `${deomlist[list].areaName}`, value: `${deomlist[list].areaCode}`, children: []})
}
}
}
// 区级显示
for (let index = 0; index < that.options.length; index++) {
for (let num = 0; num < that.options[index].children.length; num++) {
if (that.options[index].children[num].value == value) {
// console.log(that.options[index].children[num], '当前位置');
that.options[index].children[num].children = []
for (let deom = 0; deom < mindeomlist.length; deom++) {
that.options[index].children[num].children.push({text: `${mindeomlist[deom].areaName}`, value: `${mindeomlist[deom].areaCode}`})
}
}
}
}
},
onFinish({ selectedOptions }) {
this.showSelectList = false;
this.bookingaddress = selectedOptions.map((option) => option.text).join('/');
console.log(selectedOptions.map((option) => option.text));
// 接口参数赋值
this.adress1 = selectedOptions.map((option) => option.value)[0]
this.adress2 = selectedOptions.map((option) => option.value)[1]
this.adress3 = selectedOptions.map((option) => option.value)[2]
console.log(this.adress1, this.adress2, this.adress3);
}