el-menu动态绑定数据（一级，二级，三级）

爱吃羊的狗

已于 2023-07-07 13:48:27 修改

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-07-06 14:49:01 首次发布

本文链接：https://blog.csdn.net/VIVI_CSDN01/article/details/131576560

el-menu动态绑定数据并实现跳转

    <div class="menu">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#2386ee" text-color="#fff" active-text-color="#1532ef" router>
        <template v-for="(el,index) in menuList">
          <!-- 一级标题无子菜单 -->
          <el-menu-item v-if="!el.children" :index="el.path" :key="el.id">
            <span slot="title">{{el.name}}111</span>
          </el-menu-item>
          <!-- 一级标题有子菜单 -->
          <el-submenu v-else :index="'index' + index" :key="el.id">
            <template slot="title">
              <span>{{el.name}}</span>
            </template>
            <!-- 二级标题 -->
            <el-menu-item :index="children.path" v-for="children in el.children" :key="children.id">
              {{children.name}}
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </div>

export default {
  data() {
    return {
      activeIndex: '1',
      menuList: [
        { id: '01', name: '首页', path: '/', },
        { id: '02', name: '基础数据', path: '', children: [{ id: '021', name: '机型', path: '/planeType' }, { id: '022', name: '航线', path: '/line' }, { id: '023', name: '空域', path: '/airSpace' }, { id: '024', name: '飞行器', path: '/plane' },], },
        { id: '03', name: '系统管理', path: '', children: [{ id: '031', name: '用户管理', path: '/user' }, { id: '032', name: '角色管理', path: '/role' }, { id: '033', name: '组织机构管理', path: '/dept' }], },
      ],
    }
  },
}

三级标题

      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#2386ee" text-color="#fff" active-text-color="#1532ef" router>
        <!-- 一级菜单 -->
        <template v-for="item  in menuList">
         <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>
            <el-menu-item v-else :index="itemChild.path" :key="itemChild.path"><span slot="title">{{item.name}}</span></el-menu-item>
          </template>
         </el-submenu>
         <el-menu-item v-else :index="item.path" :key="item.path"><span slot="title">{{item.name}}</span></el-menu-item>
        </template>
      </el-menu>

      menuList: [
        { id: '01', name: '态势', path: '/', },
        {id: '02', name: '基础数据', path: '/base',
          children: [
            { id: '021', name: '空域航线管理', path: '/air',
             children: [
              { id: '0210', name: '空域管理', path: '/airSpace' }, 
              { id: '0211', name: '航线管理', path: '/line' }
              ] },
            { id: '022', name: '飞行器管理', path: '/pla', children: [{ id: '0220', name: '飞行器管理', path: '/plane' }, { id: '0221', name: '机型管理', path: '/planeType' }] },
            { id: '023', name: '系统管理', path: '/system' , children: [{ id: '0230', name: '用户管理', path: '/user' }, { id: '0231', name: '角色管理', path: '/role' }, { id: '2031', name: '组织机构管理', path: '/dept' }]}],
        },
      ],