vue使用iview解决多级菜单如何渲染问题

一时失言乱红尘 2022-12-11 03:29 260阅读 0赞

1、当不确定菜单有多少层级的时候，第一时间就想到使用递归的方式渲染菜单，下面我们来看看如何实现。  ![20200928120635538.png][]

2、使用ivew菜单组件，目前项目也用的是这个框架，不熟悉的小伙伴可以先看看这个菜单组件，熟悉的小伙伴我们继续向下看。

3、我的实现思路，判断没有子菜单单的时候，使用组件的正常渲染，如果有子菜单，那就需要加载这个组件 <left-menu-nav />，继续帮我们循环，走下一步

<Menu
            ref="user"
            accordion
            width="auto"
          >
            <template v-for="(items,index) in leftNav">
              
              <left-menu-nav
                v-if="items.children&&items.children.length!==0"
                :menuList="items"
                :key="items.name"
              ></left-menu-nav>
              
              <menu-item
                v-else
                :key="index"
                :name="items.id"
              >
                <i class="iconfont" :class="items.icon"></i>
                {
       {items.name}}
              </menu-item>
            </template>
          </Menu>

4、接下来我们看看这个组件（<left-menu-nav />）怎么写，主要实现思路跟上面的一样，有子菜单的时候，继续调这个组件，否则，就显示子菜单

<Submenu :name="menuList.id">
        
        <template slot="title">
          
          <i class="iconfont" :class="menuList.icon"></i>
          <span>{
       { menuList.name }}</span>
        </template>
        <template v-for="item in menuList.children">
          
          <left-menu-nav
            v-if="item.children&&item.children.length!==0"
            :menuList="item"
            :key="item.index"
          ></left-menu-nav>
          
          <menu-item v-else :key="item.id" :name="item.id" >
            
            <i class="iconfont" :class="item.icon"></i>
            {
       {item.name}}
          </menu-item>
        </template>
      </Submenu>

5、完整的代码如下

（1）、父组件view

<Sider
          ref="side1"
          hide-trigger
          collapsible
          :collapsed-width="65"
          v-model="isCollapsed"
          :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}"
        >
          <Menu
            ref="user"
            :class="menuitemClasses"
            :active-name="$store.state.activeName"
            :open-names="openKeymenu"
            accordion
            v-show="!isCollapsed"
            theme="dark"
            width="auto"
          >
            <template v-for="(items,index) in leftNav">
              
              <left-menu-nav
                v-if="items.children&&items.children.length!==0"
                :menuList="items"
                :key="items.name"
              ></left-menu-nav>
              
              <menu-item
                v-else
                :key="index"
                :name="items.id"
                @click.native="dropMenu(JSON.stringify(items))"
              >
                <i class="iconfont" :class="items.icon"></i>
                {
       {items.name}}
              </menu-item>
            </template>
          </Menu>
        </Sider>

（2）、父组件的js

import leftMenuNav from "@/components/slidemenu";
    export default {
      name: "leftMenu",
      components: {
        leftMenuNav
      },
    }

（3）slidemenu.vue文件代码

<template>
      <Submenu :name="menuList.id">
        
        <template slot="title">
          
          <i class="iconfont" :class="menuList.icon"></i>
          <span>{
       { menuList.name }}</span>
        </template>
        <template v-for="item in menuList.children">
          
          <left-menu-nav
            v-if="item.children&&item.children.length!==0"
            :menuList="item"
            :key="item.index"
          ></left-menu-nav>
          
          <menu-item v-else :key="item.id" :name="item.id">
            
            <i class="iconfont" :class="item.icon"></i>
            {
       {item.name}}
          </menu-item>
        </template>
      </Submenu>
    </template>
    <script>
    export default {
      name: "leftMenuNav",
      props: {
        menuList: {
          type: Object,
          default: () => {}
        }
      },
      data() {
        return {};
      },
      methods: {
      
      },
      mounted() {
      }
    };
    </script>
    <style  scoped>
    </style>

[20200928120635538.png]: /images/20221123/70d66a3f5c1747e8b1a1dd56e7cd0eb4.png