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