如何使用Quasar QexpansionItem制作递归菜单

Question

我想创建一个可以使用 Quasar Framework 中的 QExpansionItem 来扩展嵌套对象结构的组件。

我制作了一个递归组件来尝试实现此目的，但没有像我希望的那样显示。这些项目以错误的方式重复，我不知道为什么。

我正在使用Quasar V1.0.5，我使用QexpansionItem的组件

这里是菜单对象

[
{
    name: '1',
    icon: 'settings',
    permission: 'configuration',
    description: '1',
    url: '',
    children: [
      {
        name: '1.1',
        permission: 'configuration',
        url: '/insuranceTypes',
        icon: 'add',
        description: '1.1'
      },
      {
        name: '1.2',
        permission: 'configuration',
        url: '/insuranceTypes2',
        icon: 'phone',
        description: '1.2'
      }
    ]
  }, {
    name: '2',
    icon: 'person',
    permission: 'configuration',
    url: 'contacts',
    description: '2'
  }
  ]

MenuComponent.vue，我在其中调用侧树菜单组件

<q-list
        bordered
        class="rounded-borders q-pt-md"
      >
        <side-tree-menu :menu="menu"></side-tree-menu>

      </q-list>

SideTreeMenuComponent.vue

<template>
  <div>

    <q-expansion-item
      expand-separator
      :icon="item.icon"
      :label="item.name"
      :caption="item.description"
      header-class="text-primary"
      :key="item.name"
      :to="item.url"
      v-for="(item) in menu"
    >

      <template>
        <side
          v-for="(subitem) in item.children"
          :key="subitem.name"
          :menu="item.children"
        >
        </side>
      </template>

    </q-expansion-item>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'side',
  props: ['menu', 'children'],
  data () {
    return {
      isOpen: false,
      algo: 0
    }
  },
  mounted () {
    console.log('menu', this.menu)
  },
  computed: {
    ...mapGetters('generals', ['can'])
  }
}
</script>

元素1.1和1.2重复了，我不知道修复它

Answer 1

我遇到了同样的问题，在网上没有找到任何解决方案。我设法用下面的方法让它工作。这可能对将来的人有帮助:)

我在这里添加了 2 个最重要的代码文件，以使其正常工作。我的其余设置只不过是由 quasar create [project-name] CLI 命令创建的内容。

使用上述命令创建项目时，您将获得 MainLayout.vue 和 EssentialLink.vue 文件。我已经修改了它们以达到所需的结果。

**我的 MainLayout.vue 文件 - 模板 **

下面的

EssentialLink是组件，它使用主布局页面上抽屉内的q-expansion-item递归地呈现菜单。

<template>
  <q-layout view="hHh Lpr lFf">
    <q-header elevated>
       <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu"  
          @click="leftDrawerOpen = !leftDrawerOpen" />
        <q-toolbar-title>
          {{appTitle}}
        </q-toolbar-title>
        <div>Release {{ appVersion }}</div>
      </q-toolbar>
    </q-header>
    <q-drawer
      v-model="leftDrawerOpen" show-if-above bordered
      content-class="bg-grey-1">
      <q-list>
        <q-item-label
          header
          class="text-grey-8">
          Essential Links
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link">
        </EssentialLink>
      </q-list>
    </q-drawer>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

MainLayout.vue 文件的 script 部分。需要注意的关键属性 - children 和 level。

<script>

import EssentialLink from 'components/EssentialLink.vue'

export default {
  name: 'MainLayout',

  components: {
    EssentialLink
  },

  data () {
    return {
      appTitle: 'Project Name',appVersion: 'v0.1',leftDrawerOpen: false,
      essentialLinks: [
        {
          title: 'Search', caption: 'quasar.dev', icon: 'school',
          link: 'https://quasar.dev', 
          level: 0,
          children: [{
            title: 'Documents', caption: 'quasar.dev',icon: 'school',
            link: 'https://quasar.dev',
            level: 1, 
            children: [{
              title: 'Search (level 3)',
              caption: 'quasar.dev',
              icon: 'school',
              link: 'https://quasar.dev',
              level: 2,
              children: []
            }]
          }]
        },
        {
          title: 'Github',caption: 'github.com/quasarframework',
          icon: 'code',link: 'https://github.com/quasarframework',
          level: 0,
          children: [{
            title: 'Github Level 2',caption: 'quasar.dev',icon: 'school',
            link: 'https://quasar.dev',level: 1,
            children: []
          }]
        },
        {
          title: 'Forum',caption: 'forum.quasar.dev',
          icon: 'record_voice_over',link: 'https://forum.quasar.dev',
          level: 0,
          children: [{
            title: 'Forum Level 2',caption: 'quasar.dev',icon: 'school',
            link: 'https://quasar.dev',
            level: 1,
            children: []
          }]
        }
      ]
    }
  }
}
</script>

最后是EssentialLink.vue组件

下面的代码在其children属性中遇到超过1个项目时会递归调用自身。 level 属性用于在向下钻取时缩进菜单。

    <template>
  <div>
    <div v-if="children.length == 0">
      <q-item clickable v-ripple :inset-level="level">
        <q-item-section>{{title}}</q-item-section>
      </q-item>
    </div>
    <div v-else>
      <div v-if="children.length > 0">
        <!-- {{children}} -->
        <q-expansion-item
            expand-separator
            icon="mail"
            :label="title"
            :caption="caption"
            :header-inset-level="level"
            default-closed>
          <EssentialLink
            v-for="child in children"
            :key="child"
            v-bind="child">
          </EssentialLink>
        </q-expansion-item>
      </div>
      <div v-else>
        <q-item clickable v-ripple :inset-level="level">
          <q-item-section>{{title}}</q-item-section>
        </q-item>
      </div>
    </div>
  </div>
</template>

EssentialLink.vue 组件的

*script 部分

    <script>
export default {
  name: 'EssentialLink',
  props: {
    title: {
      type: String,
      required: true
    },

    caption: {
      type: String,
      default: ''
    },

    link: {
      type: String,
      default: '#'
    },

    icon: {
      type: String,
      default: ''
    },

    level: {
      type: String,
      default: ''
    },

    children: []
  }
}
</script>

最终输出看起来像这样（图片）

Answer 2

对于来到这里并寻找正确解决方案的任何人，您需要在再次加载 parent 的 child 中定义组件 asynchronous。 摘自文档：

import { defineAsyncComponent } from 'vue'
export default {
    components: {
        SomeComponent: defineAsyncComponent(() => import('components/SomeComponent')),
    }
}

来自Vue的解释：

为了解释发生了什么，让我们调用我们的组件 A 和 B。模块系统看到它需要 A，但是首先 A 需要 B，但是 B 需要 A，但是 A 需要 B，等等。它陷入了循环，不知道如何完全解决任一组件而不首先解决另一个组件。为了解决这个问题，我们需要给模块系统一个点，让它可以说：“A 最终需要 B，但没有必要先解决 B。”