如何使用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~