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