递归组件的使用
注册递归组件
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