<template>
<div class="tab-container">
<el-menu class="el-menu-vertical-demo" background-color="#424242" text-color="#f8f8f8" active-text-color="#f8f8f8">
<div v-for="(taskItem,taskIndex) in taskStepData" :key="taskIndex">
<el-submenu :index="String(taskItem.id)" v-if="taskItem.children&&taskItem.children.length>0">
<template slot="title">
<i>*</i>
<span>{{taskItem.note}}</span>
</template>
<el-menu-item :index="String(taskItem.id)" v-for="(childVal,childIndex) in taskItem.children" :key="'taskItem.id'+childIndex">
<template slot="title">
<span>{{childVal.note}}</span>
</template>
</el-menu-item>
</el-submenu>
<el-menu-item :index="String(taskItem.id)" v-else>
<template slot="title">
<i>*</i>
<span>{{taskItem.note}}</span>
</template>
</el-menu-item>
</div>
</el-menu>
</div>
</template> <script>
export default {
name: 'tab',
data() {
return {
taskStepData: [
{
"note": "通用",
"id": 1,
"children": [{
"note": "开始",
"id": 5
},
{
"note": "结束",
"id": 6
},
{
"note": "添加序列",
"id": 7
}
]
},
{
"note": "输入",
"id": 2,
"children": [{
"note": "Json输入",
"id": 8
}]
},
{
"note": "输出",
"id": 3,
"children": []
}
]
}
},
methods: { }
}
</script> <style scoped>
.tab-container {
margin: 30px;
}
</style>

el-menu 菜单展示的更多相关文章

  1. [转]ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  2. ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

    本篇讲解菜单.绘图.还有大小变更控件.菜单控件可以附加到各种其他控件中,比如按钮.工具栏等,甚至可以直接通过通过右键打开(模拟右键菜单):ext对绘图的支持可以让我们通过js来绘图:大小变更控件可以让 ...

  3. NODE-WEBKIT教程(6)NATIVE UI API 之MENU(菜单)

    node-webkit教程(6)Native UI API 之Menu(菜单) 文/玄魂 目录 node-webkit教程(6)Native UI API 之Menu(菜单) 前言 6.1  Menu ...

  4. 项目一:第十二天 1、常见权限控制方式 2、基于shiro提供url拦截方式验证权限 3、在realm中授权 5、总结验证权限方式(四种) 6、用户注销7、基于treegrid实现菜单展示

    1 课程计划 1. 常见权限控制方式 2. 基于shiro提供url拦截方式验证权限 3. 在realm中授权 4. 基于shiro提供注解方式验证权限 5. 总结验证权限方式(四种) 6. 用户注销 ...

  5. 第15.15节 PyQt(Python+Qt)入门学习:Designer的menu菜单、toolBar工具栏和Action动作详解

    老猿Python博文目录 老猿Python博客地址 一.引言 Qt Designer中的部件栏并没有菜单.toolBar以及Action相关的部件,仅在MainWindow类型窗口提供了menu.to ...

  6. PyQt(Python+Qt)学习随笔:Qt Designer中的menu菜单及menu bar菜单栏

    菜单由menu bar菜单栏和menu菜单两部分构成,分别对应类QMenuBar和QMenu. menuBar是包含一系列下拉菜单项组成,menu包含两种,一种是直接对应Action的,一种是父菜单, ...

  7. Android开发中的menu菜单

    复写onCreateOptionsMenu方法,当点击menu菜单时,调用该方法. @Override public boolean onCreateOptionsMenu(Menu menu) { ...

  8. SharePoint 2013 激活标题字段外的Menu菜单

    前言 SharePoint 有个很特别的字段,就是标题(Title)字段,无论想要链接到项目,还是弹出操作项目的菜单,都是通过标题字段,一直以来需要的时候,都是通过将标题字段改名进行的. 其实,Sha ...

  9. Ecshop 后台增加一个左侧列表菜单menu菜单的方法

    Ecshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages ...

  10. 后台增加一个左侧列表菜单menu菜单的方法

    Ecshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages ...

随机推荐

  1. 《企业IT架构转型之道:阿里巴巴中台战略思想与架构实战》-总结

      一.什么是业务中台 概念来自于阿里,介于前台和后台(此后台指的是云计算.数据库.消息队列.缓存等基础服务) 采用共享式架构设计解决以往烟囱式架构设计的资源浪费.重复造轮.试错成本高的问题 阿里的中 ...

  2. poi解析excel(含有公式)

    /** * Jun 25, 2012 */ import java.io.File; import java.io.FileInputStream; import java.io.IOExceptio ...

  3. 「 从0到1学习微服务SpringCloud 」01 一起来学呀!

    有想学微服务的小伙伴没?一起来从0开始学习微服务SpringCloud,我会把学习成果总结下来,供大家参考学习,有兴趣可以一起来学!如有错误,望指正! Spring .SpringBoot.Sprin ...

  4. jade 的 考古

    Jade是一款高性能简洁易懂的模板引擎(加上这两个字我想起了发动机,为什么不直接叫发动机呢), Jade是Haml的Javascript实现, 在服务端(NodeJS)及客户端均有支持. haml 是 ...

  5. .Net Core建站(2):EF Core+CodeFirst数据库迁移

    上一篇的话,说了下怎么使用EF7 实现 CodeFirst去生成数据库, 其实还有好多问题的,这次一点一点的解决吧,都挺简单,不过零零散散的,, 1.读取配置文件,获得链接字符串 2.使用数据库进行增 ...

  6. idea搭建springmvc(maven版)

    一.创建maven项目 (1)选择 file > new > project (2)填写对应信息,一路点击next 配置自己本地的maven,继续next 命名项目名(随意写,但要易懂), ...

  7. Miniio对象储存服务器安装教程

    #创建minio专用文件目录 mkdir -p /app/minio/data mkdir -p /app/minio/config chmod -R 777 /app/minio/data chmo ...

  8. Python zmq的三种简单模式

    ZMQ (以下 ZeroMQ 简称 ZMQ)是一个简单好用的传输层,像框架一样的一个 socket library,他使得 Socket 编程更加简单.简洁和性能更高. 是一个消息处理队列库,可在多个 ...

  9. react-native--->RN发送/接收事件机制

    import { AppRegistry, StyleSheet, Text, View, Platform, NativeAppEventEmitter, DeviceEventEmitter, } ...

  10. php--->注册模式

    注册模式 什么是注册树模式? 注册树模式当然也叫注册模式,注册器模式.注册树模式通过将对象实例注册到一棵全局的对象树上,需要的时候从对象树上采摘的模式设计方法. 优点:单例模式解决的是如何在整个项目中 ...