Vant Weapp TreeSelect 如何使用

Vant Weapp 的 TreeSelect 组件用于选择树形结构数据。

使用步骤如下：

1. 在需要使用 TreeSelect 的页面的 JSON 文件中添加组件引用：

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

2. 在页面 WXML 文件中使用 TreeSelect 组件：

<van-tree-select
  items="{{ items }}"
  main-active-index="{{ mainActiveIndex }}"
  active-id="{{ activeId }}"
  bind:click-nav="onClickNav"
  bind:click-item="onClickItem"
/>

其中，`items` 属性为树形结构数据源，`main-active-index` 属性为当前选中的主菜单项索引，`active-id` 属性为当前选中的叶子节点 ID，`bind:click-nav` 事件为主菜单点击事件，`bind:click-item` 事件为叶子节点点击事件。

3. 在页面的 JS 文件中定义数据源和事件处理函数：

Page({
  data: {
    items: [
      {
        text: '主菜单1',
        children: [
          {
            id: '1',
            text: '子菜单1'
          },
          {
            id: '2',
            text: '子菜单2'
          }
        ]
      },
      {
        text: '主菜单2',
        children: [
          {
            id: '3',
            text: '子菜单3'
          },
          {
            id: '4',
            text: '子菜单4'
          }
        ]
      }
    ],
    mainActiveIndex: 0,
    activeId: ''
  },
  onClickNav(event) {
    this.setData({
      mainActiveIndex: event.detail.index
    });
  },
  onClickItem(event) {
    this.setData({
      activeId: event.detail.id
    });
  }
});

其中，`items` 数组为树形结构数据源，`mainActiveIndex` 和 `activeId` 分别为当前选中的主菜单项索引和叶子节点 ID。`onClickNav` 事件处理函数处理主菜单点击事件，更新 `mainActiveIndex` 值；`onClickItem` 事件处理函数处理叶子节点点击事件，更新 `activeId` 值。