vue.js - 如何使用 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 个项目时会递归调用自身。级别属性用于在向下钻取时缩进菜单。

    <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>
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>

最终输出看起来像这样(图片)