iview如何根据后端返回的数据渲染可勾选tree

由于iview有自己的渲染叶子结点的结构，所以需要把后端返回的数据处理成Tree所需要的结构

<template>
    <Tree :data="treeData" :show-checkbox multiple ref="tree" class="tree1" @on-check-change="check"/>
</template>
<script>
    export default{
        data(){
            treeData:[],
            checkData:[],
            subdata:[]
        },
        mounted(){
          let groupData = [
                {
                    name:'',
                    id:'',
                    childrenGroup:[
                        {
                            name:'',
                            id:'',
                        }
                    ]
                },
                {
                    name:'',
                    id:''
                }
              ]
            this.treeData=loop(groupData)
        },
        methods:{
            check(){
                this.subdata= this.$ref.tree.getCheckedNodes()// 获取选中的
                this.checkData=this.subdata.filter(item=>{
                    return !item.children;
                }).map(v =>v.id)
                if(this.checkData.length!==0){
                    // 调用后端接口
                }
            },
            loop (data) {
                let newData = data.map(item =>{
                    if(item.childrenGroup){
                        loop(item.childrenGroup)
                    }
                    return {
                        ...item,
                        title:item.name,
                        children:item.childrenGroup && loop(item.childrenGroup);
                    }
                })
            return newData;
         }
        }
    }
</script>