七级菜单栏

vue菜单栏，数据量略小可使用，数据量比较大的时候不太行，替代方案ztree，万条数据加载秒速

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6">
        <el-menu
          default-active="1"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
          :collapse-transition="false"
        >
          <!-- 一级菜单 -->
          <template v-for="item in list_book">
            <el-submenu v-if="item.children && item.children.length" :index="item.id" :key="item.id">
              <template slot="title"><i class="el-icon-menu"></i><span>{
   
   { item.name }}</span></template>
              <!-- 二级菜单 -->
              <template v-for="itemChild in item.children">
                <el-submenu v-if="itemChild.children" :index="itemChild.id"
                            :key="itemChild.id"
                >
                  <template slot="title"><i class="el-icon-delete"></i><span>{
   
   { itemChild.name }}</span></template>

                  <!-- 三级菜单 -->
                  <template v-for="itemChild_three in itemChild.children">
                    <el-submenu v-if="itemChild_three.children" :index="itemChild_three.id"
                                :key="itemChild_three.id"
                    >
                      <template slot="title"><i class="el-icon-delete"></i><span>{
   
   { itemChild_three.name }}</span>
                      </template>

                      <!-- 四级菜单 -->
                      <template v-for="itemChild_four in itemChild_three.children">
                        <el-submenu v-if="itemChild_four.children" :index="itemChild_four.id"
                                    :key="itemChild_four.id"
                        >
                          <template slot="title"><i class="el-icon-delete"></i><span>{
   
   { itemChild_four.name }}</span>
                          </template>

                          <!-- 五级菜单 -->
                          <template v-for="itemChild_five in itemChild_four.children">
                            <el-submenu v-if="itemChild_five.children" :index="itemChild_five.id"
                                        :key="itemChild_five.id"
                            >
                              <template slot="title"><i class="el-icon-delete"></i><span>{
   
   {
                                  itemChild_five.name
                                }}</span>
                              </template>

                              <!-- 六级菜单 -->
                              <template v-for="itemChild_six in itemChild_five.children">
                                <el-submenu v-if="itemChild_six.children" :index="itemChild_six.id"
                                            :key="itemChild_six.id"
                                >
                                  <template slot="title"><i class="el-icon-delete"></i><span>{
   
   {
                                      itemChild_six.name
                                    }}</span>
                                  </template>

                                  <!-- 七级菜单 -->
                                  <el-menu-item v-for="itemChild_seven in itemChild_six.children"
                                                :index="itemChild_seven.id"
                                                :key="itemChild_seven.id"
                                  >
                                    <i class="el-icon-edit"></i><span slot="title">{
   
   { itemChild_seven.name }}</span>
                                  </el-menu-item>
                                </el-submenu>

                                <el-menu-item v-else :index="itemChild_six.id" :key="itemChild_six.id"><i
                                  class="el-icon-danger"
                                ></i><span
                                  slot="title"
                                >{
   
   { itemChild_six.name }}</span></el-menu-item>
                              </template>
                            </el-submenu>

                            <el-menu-item v-else :index="itemChild_five.id" :key="itemChild_four.id"><i
                              class="el-icon-danger"
                            ></i><span
                              slot="title"
                            >{
   
   { itemChild_five.name }}</span></el-menu-item>
                          </template>
                        </el-submenu>

                        <el-menu-item v-else :index="itemChild_four.id" :key="itemChild_four.id"><i
                          class="el-icon-danger"
                        ></i><span
                          slot="title"
                        >{
   
   { itemChild_four.name }}</span></el-menu-item>
                      </template>
                    </el-submenu>

                    <el-menu-item v-else :index="itemChild_three.id" :key="itemChild_three.id"><i
                      class="el-icon-danger"
                    ></i><span
                      slot="title"
                    >{
   
   { itemChild_three.name }}</span></el-menu-item>
                  </template>
                </el-submenu>

                <el-menu-item v-else :index="itemChild.id" :key="itemChild.id"><i class="el-icon-danger"></i><span
                  slot="title"
                >{
   
   { itemChild.name }}</span></el-menu-item>
              </template>
            </el-submenu>
            <el-menu-item v-else :index="item.id" :key="item.id"><i :class="item.icon"></i><span slot="title"
            >{
   
   { item.name }}</span></el-menu-item>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

学无止境，每天进步一点点