vant多级tree

vant提供了TreeSelect组件，可以实现多级树形选择。使用方法如下：

1. 引入TreeSelect组件

import { TreeSelect } from 'vant';

2. 在模板中使用TreeSelect组件

<van-tree-select
  :items="items"
  :main-active-index.sync="mainActiveIndex"
  :active-id.sync="activeId"
  :max="3"
  @click-nav="onClickNav"
  @click-item="onClickItem"
/>

其中，`items`是树形数据，`mainActiveIndex`是当前激活的一级菜单的索引，`activeId`是当前选中的节点的id，`max`是最大可选层数。

3. 在methods中定义点击事件

methods: {
  onClickNav({ index }) {
    this.mainActiveIndex = index;
  },
  onClickItem({ id }) {
    this.activeId = id;
  },
},

相关问题

vant 没有vant-tree组件呀

非常抱歉，我刚才犯了一个错误，Vant确实没有Tree组件，感谢你的提醒。

如果要在Vue项目中实现树形菜单，可以使用element-ui或vue-treeselect等第三方库，它们都提供了Tree组件。以下是使用element-ui实现树形菜单的示例代码：

1. 安装element-ui

npm install element-ui -S

2. 在main.js中引入并使用element-ui

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在组件中使用el-tree组件

<template>
  <div>
    <el-tree :data="treeData" :props="treeProps" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: 'Node 1',
          children: [
            {
              label: 'Node 1-1',
              children: [
                {
                  label: 'Node 1-1-1'
                },
                {
                  label: 'Node 1-1-2'
                }
              ]
            },
            {
              label: 'Node 1-2',
              children: [
                {
                  label: 'Node 1-2-1'
                },
                {
                  label: 'Node 1-2-2'
                }
              ]
            }
          ]
        },
        {
          label: 'Node 2',
          children: [
            {
              label: 'Node 2-1'
            },
            {
              label: 'Node 2-2'
            }
          ]
        }
      ]
    }
  },
  computed: {
    treeProps() {
      return {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
}
</script>

在上面的示例代码中，我们使用了el-tree组件来实现树形菜单，将树形菜单的数据绑定到了`treeData`属性上。`treeProps`属性用于配置树形菜单的属性，比如`children`表示子节点的属性名，这里我们使用了`label`表示节点的文本。`handleNodeClick`方法用于处理节点的点击事件。

需要注意的是，以上代码是一个简单的示例，如果需要更复杂的树形菜单，可能需要对数据进行调整，并且需要根据具体的需求进行配置。

vant实现多级列表

Vant是一个基于Vue.js的移动端UI组件库，它提供了一些常用的UI组件和一些实用的工具函数，包括多级列表。实现多级列表可以使用Vant的TreeSelect组件，以下是一个简单的示例代码：

<template>
  <van-tree-select
    :items="items"
    :main-active-index.sync="mainActiveIndex"
    :active-id.sync="activeId"
    :max-height="300"
    @click-nav="onClickNav"
    @click-item="onClickItem"
  />
</template>

<script>
export default {
  data() {
    return {
      mainActiveIndex: 0,
      activeId: [],
      items: [
        {
          text: 'Option 1',
          children: [
            {
              text: 'Option 1-1',
              id: 1
            },
            {
              text: 'Option 1-2',
              id: 2
            }
          ]
        },
        {
          text: 'Option 2',
          children: [
            {
              text: 'Option 2-1',
              id: 3
            },
            {
              text: 'Option 2-2',
              id: 4
            }
          ]
        }
      ]
    }
  },
  methods: {
    onClickNav({ index }) {
      this.mainActiveIndex = index
    },
    onClickItem({ item }) {
      this.activeId = item.id
    }
  }
}
</script>

在上面的代码中，我们使用了Vant的TreeSelect组件，并传递了items、mainActiveIndex、activeId等属性。其中，items属性是一个数组，表示多级列表的数据，每个对象包含text和children属性，text表示列表项的名称，children表示列表项的子项。mainActiveIndex和activeId属性分别控制当前激活的一级列表项和选中的最后一级列表项的id。

在方法中，我们使用了Vant的TreeSelect组件触发的两个事件：click-nav和click-item。click-nav事件表示点击一级列表项时触发，我们可以通过index参数获取当前点击的一级列表项的索引，然后将mainActiveIndex属性赋值为该索引，即可实现切换一级列表项。click-item事件表示点击最后一级列表项时触发，我们可以通过item参数获取当前点击的最后一级列表项的信息，然后将activeId属性赋值为该项的id，即可实现选中最后一级列表项。