vant移动端组件van-popup+van-picker实现自定义三级区域级联选择

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>