原生小程序使用 vant-weapp 实现级联三级选择器

引入 vant-weapp 组件库

在 app.json 中引入 vant-weapp 组件库：

"usingComponents": {
  "van-tree-select": "vant-weapp/tree-select/index"
}

编写 TreeSelect 组件

在页面的 .wxml 文件中编写 TreeSelect 组件：

<van-tree-select
  bind:change="onChange"
  :items="items"
  :main-active-index.sync="mainActiveIndex"
  :active-id.sync="activeId"
  :max-height="300"
  :height="height"
/>

其中，items 是 TreeSelect 组件的数据源，mainActiveIndex 和 activeId 分别表示当前选中的一级和二级菜单项的下标和 id，height 和 max-height 分别表示组件的高度和最大高度。

编写 TreeSelect 数据源

在页面的 .js 文件中编写 TreeSelect 数据源：

data: {
  mainActiveIndex: 0,
  activeId: [],
  items: [
    {
      text: '浙江',
      children: [
        {
          text: '杭州',
          children: [
            {
              text: '西湖区',
              id: 1
            },
            {
              text: '余杭区',
              id: 2
            },
            {
              text: '拱墅区',
              id: 3
            }
          ]
        },
        {
          text: '宁波',
          children: [
            {
              text: '海曙区',
              id: 4
            },
            {
              text: '江东区',
              id: 5
            },
            {
              text: '江北区',
              id: 6
            }
          ]
        },
        {
          text: '温州',
          children: [
            {
              text: '鹿城区',
              id: 7
            },
            {
              text: '龙湾区',
              id: 8
            },
            {
              text: '瓯海区',
              id: 9
            }
          ]
        }
      ]
    },
    {
      text: '江苏',
      children: [
        {
          text: '南京',
          children: [
            {
              text: '玄武区',
              id: 10
            },
            {
              text: '秦淮区',
              id: 11
            },
            {
              text: '建邺区',
              id: 12
            }
          ]
        },
        {
          text: '苏州',
          children: [
            {
              text: '虎丘区',
              id: 13
            },
            {
              text: '吴中区',
              id: 14
            },
            {
              text: '相城区',
              id: 15
            }
          ]
        },
        {
          text: '无锡',
          children: [
            {
              text: '锡山区',
              id: 16
            },
            {
              text: '惠山区',
              id: 17
            },
            {
              text: '滨湖区',
              id: 18
            }
          ]
        }
      ]
    }
  ]
},

其中，items 是一个数组，表示 TreeSelect 的数据源。每个元素都是一个对象，包含 text 和 children 两个属性。text 表示一级菜单项的文本，children 表示二级菜单项的数组。每个二级菜单项也是一个对象，包含 text 和 id 两个属性，分别表示文本和唯一标识符。

实现 onChange 事件

在页面的 .js 文件中实现 onChange 事件：

onChange(event) {
  const { picker, value, index } = event.detail;

  const { items } = this.data;

  this.setData({
    mainActiveIndex: index,
    activeId: value.map((item, idx) => {
      if (idx === 0) {
        return items[item].text;
      } else {
        return items[value[idx - 1]].children[item].text;
      }
    })
  });
}

其中，event.detail 包含了 picker、value 和 index 三个属性。picker 表示 TreeSelect 组件实例，value 表示当前选中的菜单项在数据源中的下标数组，index 表示当前选中的菜单项的级别。

在 onChange 事件中，我们通过 value 数组和 items 数据源，计算出当前选中的一级和二级菜单项的文本，分别赋值给 mainActiveIndex 和 activeId。最后，将 activeId 数组同步到组件中，显示选中的文本。