Vue+elementUI realizes dynamic rendering of secondary navigation menu list

straight to the point

First look at the format of the data (write a dead data to demonstrate):

  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",
            },
          ],
        },
      ],
    };
  },

If it is copied from the original elementUI, it looks like this:

 <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>

The effect is as follows:

However, the above method of fixing data can only solve part of the problem. In actual application development, most of them call the back-end interface, use the passed navigation menu data to dynamically render and display on the page, and dynamically render the secondary navigation menu. We will use v-for and interpolation syntax, the code is as follows:

    <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>

The effect is as follows:

---