Vant3 实现树状结构 - 基于 Vue3 的移动端 UI 组件库

Vant3 是一个基于 Vue3 的移动端 UI 组件库，如果要实现树状结构，可以使用 Vant3 中的 Tree 组件。

首先，在 Vue 3 中安装 Vant3：

npm install vant@next -S

然后，在需要使用 Tree 组件的组件中引入：

import { Tree } from 'vant';

接着，在模板中使用 Tree 组件：

<template>
  <van-tree :items='items' :height='400' />
</template>

其中，`:items` 是一个数组，表示树状结构的数据，`:height` 是树状结构的高度。

下面是一个简单的例子：

<template>
  <van-tree :items='items' :height='400' />
</template>

<script>
import { Tree } from 'vant';

export default {
  components: {
    [Tree.name]: Tree,
  },
  data() {
    return {
      items: [
        {
          text: '1',
          children: [
            {
              text: '1-1',
              children: [
                {
                  text: '1-1-1',
                },
                {
                  text: '1-1-2',
                },
              ],
            },
            {
              text: '1-2',
              children: [
                {
                  text: '1-2-1',
                },
                {
                  text: '1-2-2',
                },
              ],
            },
          ],
        },
        {
          text: '2',
          children: [
            {
              text: '2-1',
              children: [
                {
                  text: '2-1-1',
                },
                {
                  text: '2-1-2',
                },
              ],
            },
            {
              text: '2-2',
              children: [
                {
                  text: '2-2-1',
                },
                {
                  text: '2-2-2',
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

这个例子中，我们创建了一个树状结构，包含两个顶级节点，每个顶级节点下面有两个子节点。其中，`:text` 表示节点的文本内容，`:children` 表示子节点数组。