1.效果如图:
2.代码如下:
<template>
<div v-show="loading" class="home">
<!--弹窗-->
<van-popup v-model="cityVisable" v-model:show="popupShow" position="bottom">
<!--地区选择-->
<van-picker :columns="areaList" :columns-field-names="customFieldName" title="选择地区" @cancel="onCancel"
@confirm="onConfirm"/>
</van-popup>
</div>
</template>
<script>
import {getRegionList} from "@/api/region.api";
export default {
components: {},
data() {
//不使用picker指定属性名称,需要绑定自己的属性名称
const customFieldName = {
text: 'regionName',
value: 'regionId',
children: 'cities',
};
return {
popupShow: true,
cityVisable: 0,
customFieldName,
areaList: [],
loading: true,
regionList: [
{"regionId": 1, "regionName": "北京市", "regionPid": 0},
{"regionId": 2, "regionName": "朝阳区", "regionPid": 1},
{"regionId": 3, "regionName": "丰台区", "regionPid": 1},
{"regionId": 4, "regionName": "A镇", "regionPid": 2},
{"regionId": 5, "regionName": "B镇", "regionPid": 2},
{"regionId": 6, "regionName": "广东省", "regionPid": 0},
{"regionId": 7, "regionName": "广州市", "regionPid": 6},
{"regionId": 8, "regionName": "佛山市", "regionPid": 6},
{"regionId": 9, "regionName": "白云区", "regionPid": 7},
{"regionId": 10, "regionName": "荔湾区", "regionPid": 7}
]
};
},
created() {
this.getList();
},
methods: {
getList() {
this.loading = false;
//请求后端api获取数据对象列表
/*getRegionList().then((response) => {
this.regionList = response.data;
this.loading = true;
this.areaList = this.changeList(0);
});*/
//无后端数据,模拟假数据
this.loading = true;
this.areaList = this.changeList(0);
},
//递归拼装地区级联数据
changeList(id) {
let list = [];
for (let i in this.regionList) {
let region = this.regionList[i];
if (region.regionPid == id) {
let l = this.changeList(region.regionId);
console.log(l)
region.cities = l;
list.push(region);
}
}
return list;
},
onCancel() {
//点取消,关闭弹窗
this.popupShow = false;
},
onConfirm(value) {
//点确定,value为选择三级数据
console.log(value)
this.popupShow = false;
},
}
}
</script>