效果
文章来源：https://www.toymoban.com/news/detail-508430.html
全部代码文章来源地址https://www.toymoban.com/news/detail-508430.html
<template>
<div class="nav">
<div class="nav-main">
<div class="logo">
<img src="http://p0.qhimg.com/t01fe635ab3e1451786.png" style="width: 65%;"/>
</div>
<div class="menu-main" style="min-width: 900px">
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
text-color="#606166"
active-text-color="#02a388">
<!-- 一级菜单 -->
<template v-for="item in list">
<el-submenu v-if="item.children && item.children.length" :index="item.path" :key="item.path">
<template slot="title"><span>{
{item.name}}</span></template>
<!-- 二级菜单 -->
<template v-for="itemChild in item.children">
<el-submenu v-if="itemChild.children && itemChild.children.length" :index="itemChild.path" :key="itemChild.path">
<template slot="title"><span>{
{itemChild.name}}</span></template>
<!-- 三级菜单 -->
<el-menu-item v-for="itemChild_Child in itemChild.children" :index="itemChild_Child .path" :key="itemChild_Child.path">
<span slot="title">{
{itemChild_Child.name}}</span>
</el-menu-item>
</el-submenu>
到了这里，关于element ui 导航动态三级菜单的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
