vue+elementUI实现动态渲染二级导航菜单列表

直接进入正题

首先看数据的格式（写个死数据来演示）：

1.  
   data() {
2.  
   return {
3.  
   menulist: [
4.  
   {
5.  
   id: 101,
6.  
   navName: "商品管理",
7.  
   children: [
8.  
   {
9.  
   id: 11,
10.  
    navName: "商品一",
11.  
    },
12.  
    ],
13.  
    },
14.  
    {
15.  
    id: 102,
16.  
    navName: "用户管理",
17.  
    children: [
18.  
    {
19.  
    id: 22,
20.  
    navName: "用户一",
21.  
    },
22.  
    {
23.  
    id: 33,
24.  
    navName: "用户二",
25.  
    },
26.  
    ],
27.  
    },
28.  
    {
29.  
    id: 103,
30.  
    navName: "个人中心",
31.  
    children: [
32.  
    {
33.  
    id: 44,
34.  
    navName: "个人1",
35.  
    },
36.  
    {
37.  
    id: 55,
38.  
    navName: "中心2",
39.  
    },
40.  
    {
41.  
    id: 66,
42.  
    navName: "个人中心3",
43.  
    },
44.  
    ],
45.  
    },
46.  
    ],
47.  
    };
48.  
    },

如果是原始的elementUI复制过来长这个样子：

1.  
   <el-menu background-color="#545c64" text-color="#fff">
2.  
   <el-submenu index="1">
3.  
   <template slot="title">
4.  
   <span>菜单一级</span>
5.  
   </template>
6.  
   <el-menu-item-group>
7.  
   <el-menu-item index="1-1">
8.  
   <span>菜单二级1</span>
9.  
   </el-menu-item>
10.  
    <el-menu-item index="1-2">
11.  
    <span>菜单二级2</span>
12.  
    </el-menu-item>
13.  
    </el-menu-item-group>
14.  
    </el-submenu>
15.  
    </el-menu>

效果如下图：

但是以上的固定数据的方式只能解决一部分问题，在实际应用开发中，大多数都是调用后端接口，使用传过来的导航菜单数据来动态渲染显示在页面上，动态渲染二级导航菜单，我们会使用到v-for和插值语法，代码如下：

1.  
   <el-menu background-color="#545c64" text-color="#fff">
2.  
   <el-submenu :index="item.id ''" v-for="item in menulist" :key="item.id">
3.  
   <template slot="title">
4.  
   <span>{{ item.navName }}</span>
5.  
   </template>
6.  
   <el-menu-item-group>
7.  
   <el-menu-item
8.  
   :index="subItem.id ''"
9.  
   v-for="subItem in item.children"
10.  
    :key="subItem.id"
11.  
    >
12.  
    <span>{{ subItem.navName }}</span>
13.  
    </el-menu-item>
14.  
    </el-menu-item-group>
15.  
    </el-submenu>
16.  
    </el-menu>

效果如下图：

这篇好文章是转载于：学新通技术网