vue2 + element三级菜单实现模板

需求:

需要一个含有三级菜单的结构模板,用于业务快速开发。

解决:

sidebar.vue

复制代码
<template>
  <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" 
    active-text-color="#ffd04b">
    <template v-for="menu in menus">
      <el-submenu :index="menu.index" v-if="menu.children && menu.children.length > 0">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>{{ menu.name }}</span>
        </template>
        <template v-for="child in menu.children">
          <el-submenu :index="child.index" v-if="child.children && child.children.length > 0">
            <template slot="title">{{ child.name }}</template>
            <el-menu-item v-for="subChild in child.children" :index="subChild.index" :key="subChild.index">{{
    subChild.name
  }}</el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="child.index">{{ child.name }}</el-menu-item>
        </template>
      </el-submenu>
      <el-menu-item v-else :index="menu.index">{{ menu.name }}</el-menu-item>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      defaultActive: '1',
      menus: [
        {
          index: '1',
          name: '一级菜单1',
          children: [
            {
              index: '1-1',
              name: '二级菜单1-1',
              children: [
                { index: '1-1-1', name: '三级菜单1-1-1' },
                { index: '1-1-2', name: '三级菜单1-1-2' }
              ]
            },
            {
              index: '1-2',
              name: '二级菜单1-2',
              children: [
                { index: '1-2-1', name: '三级菜单1-2-1' },
                { index: '1-2-2', name: '三级菜单1-2-2' }
              ]
            }
          ]
        },
        {
          index: '2',
          name: '一级菜单2',
          children: [
            {
              index: '2-1',
              name: '二级菜单2-1',
              children: [
                { index: '2-1-1', name: '三级菜单2-1-1' },
                { index: '2-1-2', name: '三级菜单2-1-2' }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.el-menu {
  width: 287px;

  .el-menu-item {
    font-size: 16px;
    padding-left: 49px;

    &.is-active {
      //color: #fff;
      //background-color: #6c7c97;
      background-color: #fafafa;
      color: #409eff;
    }
  }
}

.el-submenu /deep/ .el-submenu__title {
  font-size: 16px;
}

.cuscRouter {
  // background-color: #fafafa;
  color: #409eff !important;
}
</style>
相关推荐
前端权几秒前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户380225859824几秒前
vue3源码解析:调度器
前端·vue.js
一一一87111 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
梦想CAD控件26 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
markyankee1011 小时前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
借月1 小时前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang1 小时前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式