element-ui+vue 3级导航菜单动态渲染_vue3动态路由导航三级菜单

直接上代码

// vue文件
<template>
  <!-- el-menu：菜单栏的根组件 router: 设置路由可以跳转 -->
  <el-menu
    :router="true"
    :unique-opened="true"
    class="mymenu el-menu-vertical-demo"
  >
    <!-- submenu：菜单栏中的一项 index: 它的标识（唯一）-->
    <el-submenu
      v-for="(item, index) in menusList"
      :key="index"
      :index="item.id.toString()"
    >
      <!-- 这一项的图标&文字信息 -->
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{ item.title }}</span>
      </template>
      <!-- 判断是否最后一级子元素 -->
      <template v-for="(item1, index1) in item.chirdren">
        <!-- 如果不是最后一级 -->
        <template v-if="item1.chirdren !== null">
          <el-submenu :key="index1" :index="item1.name">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ item1.title }}</span>
            </template>
            <el-menu-item
              v-for="(item2, index2) in item1.chirdren"
              :key="index2"
              :index="'/' + item2.name"
            >
              <i class="el-icon-s-grid"></i>
              <span>{{ item2.title }}</span>
            </el-menu-item>
          </el-submenu>
        </template>
        <!-- // -->
        <!-- 如果是最后一级 -->
        <template v-else>
          <el-menu-item :key="index1" :index="'/' + item1.name">
            <i class="el-icon-s-grid"></i>
            <span>{{ item1.title }}</span>
          </el-menu-item>
        </template>
        <!-- // -->
      </template>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menusList: menu
    };
  }
};
</script>

<style></style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

因为v-for和v-if不能一起使用，eslint会报错，查阅官方文档后，将v-for放到template标签里，即可解决
4级以上菜单不推荐使用此方法，可以用组件递归逻辑。

// 数据结构
"menu": [
            {
                "id": 1,
                "parent_id": 0,
                "type": 1,
                "title": "设备管理",
                "name": "admin/device/index",
                "chirdren": [
                    {
                        "id": 2,
                        "parent_id": 1,
                        "type": 2,
                        "title": "设备管理【管理员】",
                        "name": "admin/device/index",
                        "son": [
                            {
                                "id": 4,
                                "parent_id": 2,
                                "type": 3,
                                "title": "设备列表",
                                "name": "admin/device/index",
                                "chirdren": null
                            }
	   }
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26