<van-field
readonly
clickable
name="picker"
:value="value"
label="省市区"
placeholder="选择省市区"
@click="showPicker = true"
/>
data() {
return {
value: "",
showPicker: false,
columns: [],
area: "",
shengId: "",
shiId: "",
quId: ""
};
methods: {
//获取id，以及展示信息
onConfirms(values, index) {
this.value = values.toString();
this.showPicker = false;
this.arrayid = index;
for (let a = 0; a < this.area.length; a++) {
if (a == this.arrayid[0]) {
//获取省级id
this.shengId = this.area[a].id;
console.log(this.shengId);
}
}
// 市级
let city = this.area[this.arrayid[0]].children;
for (let b = 0; b < city.length; b++) {
if (b == this.arrayid[1]) {
this.shiId = city[b].id;
console.log(this.shiId);
}
}
// 县级
let county = this.area[this.arrayid[0]].children[this.arrayid[1]];
for (let c = 0; c < county.children.length; c++) {
if (c == this.arrayid[2]) {
this.quId = county.children[c].id;
console.log(this.quId);
}
}
},
//获取所有的地区信息
getaddress() {
this.$axios
.post(
"省市区接口地址"
)
.then(res => {
console.log(res);
if (res.data.code === 100000) {
this.area = res.data.result;
for (let index = 0; index < res.data.result.length; index++) {
let sheng = res.data.result[index];
sheng.text = res.data.result[index].name;
sheng.children = res.data.result[index].city_info;
this.columns.push(sheng);
// 循环市级单位
for (let i = 0; i < res.data.result[index].children.length; i++) {
let shi = res.data.result[index].children[i];
shi.text = shi.name;
shi.children = res.data.result[index].children[i].county_info;
//循环县级
for (
let j = 0;
j < res.data.result[index].children[i].children.length;
j++
) {
let xian = res.data.result[index].children[i].children[j];
xian.text = xian.name;
}
}
}
console.log(this.columns);
}
});
},
}
由于后台给的接口字段和vant ui 官方的不同，所以手动插了几个值，text ，children，比较麻烦，