zoukankan      html  css  js  c++  java
  • 玩玩菜单

    <el-menu
    :default-active="this.$route.path"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#fff"
    text-color="#333">
    <template v-for="item in menus">
    <!--如果有子菜单-->
    <template v-if="item.subs">
    <el-submenu :index="item.index" :key="item.index">
    <template slot="title">
    <i :class="item.icon"></i>
    <span slot="title">{{ item.title }}</span>
    </template>
    <template v-for="subItem in item.subs">
    <!--如果有二级菜单-->
    <template v-if="subItem.subs">
    <el-submenu :index="subItem.index" :key="subItem.index">
    <template slot="title">
    {{subItem.title}}
    </template>
    <template v-for="thirdItem in subItem.subs">
    <!--如果有三级菜单-->
    <template v-if="thirdItem.subs">
    <el-submenu :index="thirdItem.index" :key="thirdItem.index">
    <template slot="title">
    {{thirdItem.title}}
    </template>
    <template v-for="fourItem in thirdItem.subs">
    <el-menu-item :index="fourItem.index" :key="fourItem.index">
    <template slot="title">
    <i :class="fourItem.icon"></i>
    <span slot="title">{{ fourItem.title }}</span>
    </template>
    </el-menu-item>
    </template>
    </el-submenu>
    </template>
    <template v-else>
    <el-menu-item :index="thirdItem.index" :key="thirdItem.index">
    <router-link class="a" :to="thirdItem.index">
    {{thirdItem.title}}
    </router-link>
    </el-menu-item>
    </template>
    </template>
    </el-submenu>
    </template>
    <template v-else>
    <el-menu-item :index="subItem.index" :key="subItem.id">
    <template slot="title">
    <router-link class="a" :to="subItem.index">
    {{subItem.title}}
    </router-link>
    </template>
    </el-menu-item>
    </template>
    </template>
    </el-submenu>
    </template>
    <template v-else>
    <el-menu-item :index="item.index" :key="item.index">
    <template slot="title">
    <i :class="item.icon"></i>
    <span slot="title">{{ item.title }}</span>
    </template>
    </el-menu-item>
    </template>
    </template>
    </el-menu>

    数据部分

    menus: [
    {
    icon: 'el-icon-menu',
    index: 'index',
    title: '系统首页',
    subs: [
    {
    index: '/home/1',
    title: '钢材1'
    },
    {
    index: '/home/2',
    title: '化材1',
    subs: [
    {
    index: '/home/3',
    title: '钢材2'
    },
    {
    index: '/home/4',
    title: '化材2',
    subs: [
    {
    index: '/home/5',
    title: '钢材3'
    },
    {
    index: '/home/6',
    title: '化材3'
    }
    ]
    }
    ]
    }
    ]
    }
    ],

    方法

     handleSelect (key, keyPath) {
            console.log(key, keyPath)
          }
  • 相关阅读:
    fiddler 抓https坑
    20171029机器学习之特征值选择
    20171028机器学习之线性回归过拟合问题的解决方案
    使用Matplotlib画对数函数
    对朴素贝叶斯的理解(python代码已经证明)
    解决Mac系统下matplotlib中文显示方块问题
    个人工作总结08(第二次冲刺)
    个人工作总结07(第二次冲刺)
    个人工作总结06(第二次冲刺)
    个人工作总结05(第二次冲刺)
  • 原文地址:https://www.cnblogs.com/ronle/p/11102926.html
Copyright © 2011-2022 走看看