van-dropdown-menu Vue3如何内嵌多级结构

Van-Dropdown-Menu 是 Vant UI 的一个组件，它是一个下拉菜单，常用于提供选项列表供用户选择。要在 Vue3 中实现内嵌多级结构，你可以通过递归数据结构来构建这个复杂菜单。下面是一个简单的示例：

<template>
  <van-dropdown-menu v-model="activeDropdown" @on-change="handleChange">
    <!-- 外层循环处理一级菜单 -->
    <div v-for="(item, index) in menus" :key="index">
      <span>{{ item.text }}</span>
      <!-- 当前项是一级菜单时，显示子菜单 -->
      <van-dropdown-menu slot="dropdown" v-model="item.children && item.children.active" @on-change="handleSubChange">
        <div v-for="(subItem, subIndex) in item.children.items" :key="subIndex">
          <span>{{ subItem.text }}</span>
        </div>
      </van-dropdown-menu>
    </div>
  </van-dropdown-menu>
</template>

<script>
export default {
  data() {
    return {
      activeDropdown: null,
      menus: [
        // 示例数据，包含多级菜单
        {
          text: '一级菜单1',
          children: { // 如果有子菜单
            active: false, // 初始状态
            items: [
              { text: '二级菜单1-1' },
              { text: '二级菜单1-2' },
              // ... 更多子菜单
            ]
          }
        },
        // 其他一级菜单...
      ],
    };
  },
  methods: {
    handleChange(value) {
      this.$emit('input', value);
      // 可以在这里更新当前选中菜单的状态，如果需要
    },
    handleSubChange(value) {
      // 更新二级菜单状态
      const selectedParent = this.menus.find(item => item.children && item.children.active === value);
      if (selectedParent) {
        selectedParent.children.active = value;
      }
    },
  },
};
</script>

在这个例子中，我们创建了一个外层的 `van-dropdown-menu`，每个一级菜单都有一个对应的 `v-model`，当一级菜单打开时，其内部的二级菜单会随之展开。`handleChange` 和 `handleSubChange` 方法分别负责一级菜单和二级菜单的选择。