如何使用Vant的TreeSelect组件

要使用Vant的TreeSelect组件，首先需要在项目中安装Vant UI库。可以通过npm或yarn来进行安装：

npm install vant

或

yarn add vant

接下来，在需要使用TreeSelect组件的页面中导入TreeSelect组件：

import { TreeSelect } from 'vant';

export default {
  components: {
    [TreeSelect.name]: TreeSelect,
  },
}

然后在模板中使用TreeSelect组件，并传入相应的数据：

<template>
  <div>
    <tree-select
      :items="items"
      :main-active-index="0"
      :active-id="activeId"
      @click-nav="onClickNav"
      @click-item="onClickItem"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          text: 'Group 1',
          children: [
            { text: 'Option 1', id: 1 },
            { text: 'Option 2', id: 2 },
          ],
        },
        {
          text: 'Group 2',
          children: [
            { text: 'Option 3', id: 3 },
            { text: 'Option 4', id: 4 },
          ],
        },
      ],
      activeId: 1,
    };
  },
  methods: {
    onClickNav({ index }) {
      console.log('click nav', index);
    },
    onClickItem({ id }) {
      console.log('click item', id);
    },
  },
};
</script>

以上代码示例中，items数组包含了树形结构的数据，activeId表示当前选中的节点id。通过click-nav和click-item事件可以监听导航栏和选项的点击事件。