element-ui菜单布局判断- el-menu

562 阅读1分钟

效果图

Snipaste_2021-12-10_17-04-11.png

  menuList: [
        {
          title: "首页",
          icon: "icon-zuocelan-gongzuotai",
          path: "/",
          // children: [
          //   { title: "菜单1", path: "/page5" },
          // ]
        },

 <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          :router="true"
          unique-opened
        >
          <!-- <el-menu-item
            v-for="(item, index) in menuList"
            :key="index"
            :index="item.path"
          >
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item> -->
          <template v-for="(item, index) in menuList">
            <el-submenu
              v-if="item.children"
              :index="item.path"
              :key="item.title"
            >
              <template slot="title">
                <i :class="'iconfont ' + item.icon + ' mr-8'" />
                <span>{{ item.title }}</span>
              </template>

              <template v-for="el in item.children">
                <el-menu-item
                  v-if="!el.hidden"
                  :index="el.path"
                  :key="el.title"
                >
                  <i :class="'iconfont ' + el.icon + ' mr-8'" />
                  <span slot="title">{{ el.title }}</span>
                </el-menu-item>
              </template>
            </el-submenu>

            <el-menu-item v-else :key="index" :index="item.path">
              <i :class="'iconfont ' + item.icon + ' mr-8'"></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>