el-menu 菜单展示

<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>