vant级联选择异步加载无限层级地区

Vant 的级联选择组件支持异步加载无限层级地区，只需要在数据源中设置 `children` 字段即可。

首先，我们需要在 `data` 中定义一个空数组 `regionList` 作为数据源。然后，在组件中使用 `:options` 属性绑定数据源，同时设置 `lazy` 属性为 `true`，表示开启懒加载，这样在初始化时只会渲染一级数据。

接下来，在监听 `change` 事件时，判断当前选中项是否有 `children` 字段，如果有则通过异步请求获取下一级数据，将获取到的数据添加到 `children` 中。这样就实现了无限层级的异步加载。

以下是示例代码：

<template>
  <van-cascader
    :options="regionList"
    :lazy="true"
    @change="handleRegionChange"
  />
</template>

<script>
export default {
  data() {
    return {
      regionList: [], // 数据源
    };
  },
  methods: {
    // 监听选中项变化
    async handleRegionChange(values) {
      const level = values.length; // 当前选中的层级
      const parentCode = values[level - 1]; // 当前选中项的父级编码
      const region = this.getRegionByCode(parentCode); // 获取对应的地区数据

      // 如果当前选中项有 children 字段且未加载过子级数据
      if (region.children && !region.children.length) {
        const children = await this.loadRegionChildren(parentCode); // 异步加载子级数据
        region.children = children; // 将子级数据添加到 children 中
      }
    },
    // 根据编码获取对应的地区数据
    getRegionByCode(code) {
      const list = this.regionList;
      for (let i = 0; i < list.length; i++) {
        const region = list[i];
        if (region.value === code) {
          return region;
        }
      }
      return null;
    },
    // 异步加载子级数据
    async loadRegionChildren(parentCode) {
      const res = await fetch(`/api/region?parentCode=${parentCode}`);
      const data = await res.json();
      return data;
    },
  },
};
</script>