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>
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui