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，即可实现选中最后一级列表项。