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

直接进入正题

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

  data() {
    return {
      menulist: [
        {
          id: 101,
          navName: "商品管理",
          children: [
            {
              id: 11,
              navName: "商品一",
            },
          ],
        },
        {
          id: 102,
          navName: "用户管理",
          children: [
            {
              id: 22,
              navName: "用户一",
            },
            {
              id: 33,
              navName: "用户二",
            },
          ],
        },
        {
          id: 103,
          navName: "个人中心",
          children: [
            {
              id: 44,
              navName: "个人1",
            },
            {
              id: 55,
              navName: "中心2",
            },
            {
              id: 66,
              navName: "个人中心3",
            },
          ],
        },
      ],
    };
  },

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

 <el-menu background-color="#545c64" text-color="#fff">
      <el-submenu index="1">
        <template slot="title">
          <span>菜单一级</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">
            <span>菜单二级1</span>
          </el-menu-item>
          <el-menu-item index="1-2">
            <span>菜单二级2</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
</el-menu>

效果如下图：

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

    <el-menu background-color="#545c64" text-color="#fff">
      <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
        <template slot="title">
          <span>{
   
   { item.navName }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            :index="subItem.id + ''"
            v-for="subItem in item.children"
            :key="subItem.id"
          >
            <span>{
   
   { subItem.navName }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>

效果如下图：

---