el-tree 懒加载,默认加载N级.异步加载子节点

如何使用elementui中的树形组件在懒加载模式中会默认展开N层;

需求如下:

1. 用tree组件进行懒加载
2. 默认会展开4层.剩下的使用异步加载.

<template>
    <div id="app">
        <el-tree
            :props="props"
            :load="loadNode"
            lazy
            show-checkbox>
        </el-tree>
    </div>
</template>
<script>
export default {
    data(){
        return {
            props: {
                label: 'name',
                children:'children',
                value: 'id',
                isLeaf: (data) => {
                    return !!data.leaf;
                }
            },
            defaulData:[
                {
                    name: '默认加载第一级',
                    id: '0',
                    children:[{
                        name: '默认加载第二级1',
                        id: '01',
                        children:[
                            {
                                name: '默认加载第三级',
                                id: '003',
                                children:[
                                    {
                                        name: '默认加载第四级',
                                        id: '0004'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: '默认加载第二级2',
                        id: '02',
                        children:[
                            {
                                name: '默认加载第三级2',
                                id: '002',
                                children:[
                                    {
                                        name: '默认加载第四级2',
                                        id: '0005'
                                    }
                                ]
                            }
                        ]
                    }]
                }
            ]
        }
    },
    methods:{

        loadNode(node, resolve) {
            console.log(node)
            if (node.level == 0) {//默认加载第1层.
                return resolve(this.defaulData);
            }else if(node.level > 0 && node.level < 4){ //默认展开的层级,需要默认几层就判断一下.
                return resolve(node.data.children);	//核心是这里,每次展开的时候loadNode方法就会调用一次,只需要把node.data.[这里是默认的child字段]  加载到resolve方法里就可以了.就可以实现默认加载N级,之后再使用懒加载
            }else{	//懒加载方法
                setTimeout(() => {
                    resolve([{
                        name: `懒加载第${node.level + 1}级` + +new Date(),
                        id: `${+new Date()}`
                    }]);
                }, 500);
            }
        }
    }
}
</script>

• 如果此文章对您有帮助，请给个赞吧！好了，快动手试试吧.有问题请留言或者@博主,谢谢支持o(￣︶￣)o~