Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据

准备:导入ElementUI 看官网教程

数据准备:JSON数据转换成树状

参考文章: JS实现 JSON扁平数据转换树状数据

后台我拿的数据是这样的格式:

[
{id:1 , parentId: 0, name: '', level: 0},
{id:2 , parentId: 0, name: '', level: 0},
{id:3 , parentId: 2, name: '', level: 1},
{id:4 , parentId: 2, name: '', level: 1},
{id:5 , parentId: 4, name: '', level: 2},
]

 

 

 转换后的数据差不多就是这样的格式

{
    [
        {
            id: 1,
            name: ''
        },
        {
            id: 2,
            name: '',
            children: [
                {
                    id: 3
                },
                {
                    id: 4,
                    children: [
                        {
                            id: 5
                        }
                    ]
                }
            ]
        },
    ]
}

 

 

自定义组件 路径 componebts/NavMenu.vue

 

<template>
  <fragment class="navMenu">
    <template v-for="navMenu in navMenus">
      
      <el-menu-item v-if="!navMenu.children" :key="navMenu.menuId" :data="navMenu" :index="navMenu.menuUrl+'/'+navMenu.menuId">//带参数ID
        <i :class="navMenu.menuIcon">i>
        <span slot="title" >{{navMenu.menuName}}span>
      el-menu-item>
      
      <el-submenu v-if="navMenu.children"
                  :key="navMenu.menuId" :data="navMenu" :index="navMenu.menuId">//navMenu.menuId解决跳转相同路由页面 展开菜单问题
        <template slot="title">
          <i :class="navMenu.menuIcon">i>
          <span slot="title"> {{navMenu.menuName}}span>
        template>
        
        <NavMenu :navMenus="navMenu.children">NavMenu>
      el-submenu>
    template>

  fragment>
template>

<script>
  export default {
    name: 'NavMenu',
    props: ['navMenus'],
    data() {
      return {}
    },
    methods: {}
  }
script>

<style>
style>

自定义组件包含在 fragment 不是div 不然展开和缩人会出现显示问题
如下:

解决菜单导航折叠后文字不隐藏

出现这个问题是因为我们在嵌套中出现了意料之外的

,而标签本身希望里面嵌套的是,,其中之一
但是我们又不能直接删掉

,因为