ncs_board_ssr/components/nest-component.vue

<template>
    <div >
    <div v-for="(el,index) in tasks" :key="el.unique"><!--:key="el.unique"-->
        <template v-if="el.moduleConfig.isCircleChild">
            <component   :is="templates[el.tpl_id]" :data="el" :bind-data="bindData" :show="show"  :child-data-index="childDataIndex">

                <van-grid-item  v-for="i in ((el.moduleConfig.gridCloumns*el.moduleConfig.gridRows)>(bindData.items?bindData.items.length:0)?(bindData.items?bindData.items.length:0):(el.moduleConfig.gridCloumns*el.moduleConfig.gridRows))" :key="'grid-item'+i" style="padding: 5px;">

                    <nest-component :tasks="el.children" :bind-data="bindData" :show="show"  :child-data-index="i-1" />

                </van-grid-item>

            </component>
        </template>
        <template v-else>
            <component   :is="templates[el.tpl_id]" :data="el" :bind-data="bindData"  :show="show"   :child-data-index="childDataIndex">
                <!--            <p>{{ el.name }}</p>-->
                <nest-component :tasks="el.children" :bind-data="bindData" :show="show"   :child-data-index="childDataIndex"/>
            </component>
        </template>

    </div>
    </div>
</template>

<script>
    import templates, {templateArray} from './templates'
    export default {
        name: "nest-component",
        props: {
            tasks: {
                type:Array,
                default:([])
            },
            bindData:{
                type:Object,
                default:()=>({})
            },
            childDataIndex:{
                type:Number,
                default:0
            },
            // statisticData:{
            //     type:Object,
            //     default:()=>({})
            // },
            // /** 自定义看板项目*/
            // boardCustomerItems:{
            //     type:Array,
            //     default:([])
            // },
            /** 动画驱动**/
            show:{
                type:Boolean,
                default:true
            }
        },
        data(){
            return{
                templates,
                templateArray,
                floorOptions: {
                    animation: 150,
                    group: { name: 'tplGroup', put: true },
                    sort: true,
                    handle: '.handle-move'
                },
            }
        },
      mounted() {
            // console.log('child',this.data.children)
      }
    }
</script>

<style scoped>

</style>