vue+elementUI el-menu出现多级菜单项目中用到的比较多，记录一下

最新推荐文章于 2023-07-13 17:32:02 发布

weixin_46156770

最新推荐文章于 2023-07-13 17:32:02 发布

阅读量804

点赞数

分类专栏： vue JavaScript 文章标签：前端

本文链接：https://blog.csdn.net/weixin_46156770/article/details/128704770

版权

vue 同时被 2 个专栏收录

41 篇文章 2 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

<el-menu default-active="2" class="delegate" @select="selectItem">
 <div v-for="(item) in navList" :key="item.id">
    <i :class="item.icon" style="font-size: 28px;vertical-align: middle;"></i>
    <!-- 一级菜单（没有子级菜单） -->
    <el-menu-item :index="item.id" v-if="!item.children">{{ item.text }}</el-menu-item>
    <!-- 一级菜单（有子级菜单） -->
    <el-submenu :index="item.id" v-else class="second_submenu">
      <template slot="title">{{item.text}}</template>
      <!-- 判断二级菜单（没有三级菜单） -->
      <div v-for="(it) in item.children" :key="it.id">
        <i :class="it.icon" style="font-size: 20px;vertical-align: middle;padding-left:15px"></i>
        <el-menu-item :index="it.id" v-if="!it.children" class="second_menu">{{it.text}}</el-menu-item>
        <!-- 判断二级菜单（有三级菜单） -->
        <el-submenu :index="it.id" v-if="it.children" class="second_menu">
          <template slot="title">{{it.text}}</template>
          <div v-for="i of it.children" :key="i.id" class="third_menu">
            <i :class="i.icon" style="font-size: 20px;vertical-align: middle;padding-left:15px"></i>
            <el-menu-item :index="i.id">{{i.text}}</el-menu-item>
          </div>

        </el-submenu>
      </div>
    </el-submenu>
  </div>
</el-menu>

<script>
data(){
  return{
    navList: [
          {
            id: "1",
            text: "通用计算类",
            icon: "el-icon-s-data",
            children: [{
              id: '1-1',
              text: '龙芯产品',
              icon: 'el-icon-monitor'
            }, {
              id: '1-2',
              text: 'X86产品',
              icon: 'el-icon-film'
            }]
          },
          {
            id: "2",
            text: "AI解决方案",
            icon: "el-icon-s-finance",
            children: [
              {
                id: '2-1',
                text: '端测产品系列',
                icon: 'el-icon-s-finance',
                children: [
                  {
                    id: '2-1-1',
                    text: '骁腾100',
                    icon: 'el-icon-files'
                  }, {
                    id: '2-1-2',
                    text: '智撷1000',
                    icon: 'el-icon-box'
                  },
                  {
                    id: '2-1-3',
                    text: '凌云1020',
                    icon: 'el-icon-wallet'
                  }, {
                    id: '2-1-4',
                    text: 'Quaitra微服务器',
                    icon: 'el-icon-sell'
                  }
                ]
              },
              {
                id: '2-2',
                text: '中心测产品系列',
                icon: 'el-icon-s-finance',
                children: [
                  {
                    id: '2-2-1',
                    text: 'HyperDL 4.0',
                    icon: 'el-icon-files'
                  }
                ]
              },
              {
                id: '2-3',
                text: '算法软件开发',
                icon: 'el-icon-s-operation'
              }]
          },
          {
            id: "3",
            text: "IT定制解决方案",
            icon: "el-icon-s-flag",
            children: [{
              id: '3-1',
              text: '飞腾产品',
              icon: 'el-icon-coin'
            }, {
              id: '3-2',
              text: '网络安全隔离网闸',// 产品分类结果页    网络安全   网络安全隔离网闸
              icon: 'el-icon-male'
            }]
          },
          // {
          //   id: "4",
          //   text: "算法软件开发",
          //   icon: "el-icon-s-operation",
          // }
        ],
  }
}
methods:{
	selectItem(val) {
	  this.num = val;
	},
}
</script>