vue递归组件制作任务进度表

递归组件的使用

注册递归组件

　　

Vue.component('item-child',{
			template:`
				<div class="det">
					<div class="item-wrap" v-for="item of list">
					<div class="item" style="margin-left: 10%;">
						<div class="progress-bar" :style="{width:item.rates}">
							{{item.rates}}
							<p class="info">
								{{item.node_name}}
							</p>
						</div>
					</div>
					<item-child :list='item.child' v-if="item.child"></item-child>
				</div>
			</div>
			`,
			props:["list"],
			name:'det',
			data(){
				return{
					show:false
				}
			}
		})

页面效果

Other

点击进度条可以打开或关闭子任务（使用jquery完成，欢迎用vue改进）

源码地址：https://github.com/yumendexihai/taskbar