ElementUi tree结构 懒加载使用

前言

        这是官网原话：   由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。

        其中在数据添加leaf: true，就证明该节点下没有子级。

一. html结构

<template>
    <div>
        <el-tree :props="props" :load="loadNode" lazy>
        </el-tree>
    </div>
</template>





data() {
    return {
       props: {
           label: 'name',
           children: 'zones',
           isLeaf: 'leaf'
       },
    }
},

二. 方法

因为tree懒加载会默认自动请求一次方法 下面是模拟请求数据来操作,  node中我们可以获取当前点击tree结构的数据值，进行传值 。在实际开发中 请求接口时 肯定会有一个字段比如镇街id 如果当前请求接口没有传镇街id 后端返回的就是第一级数据 传了镇街id 就是返回当前镇街下的数据。

loadNode(node, resolve) {
    let _this = this;
    console.log('------node-----', node);   // 获取点击tree结构数据
    if (node.level === 0) {
       _this.handlegettreeData(resolve);
    }
    if (node.level === 1) {
       _this.handlegettreeData(resolve, node.data.id);
    }
    if (node.level > 1) return resolve([]);
},

// 获取tree结构数据
        handlegettreeData(resolve,zjid) {
            console.log('----error-----', zjid);

            // tree结构第一级数据
            if (!zjid) {
                let arr = [
                    {
                        name: '马池口镇',
                        id: '1'
                    },
                    {
                        name: '南口镇',
                        id: '2'
                    },
                    {
                        name: '白泉镇',
                        id: '3'
                    },
                    {
                        name: '白浮镇',
                        id: '4'
                    },
                    {
                        name: '大涨镇',
                        id: '5'
                    }
                ];
                
                resolve(arr);
                
            } else {
                setTimeout(() => {
                    let arr = [
                        {
                            name: '村1',
                            id: '6'
                        },
                        {
                            name: '村2',
                            id: '7'
                        },
                        {
                            name: '村3',
                            id: '8'
                        },
                        {
                            name: '村4',
                            id: '9'
                        },
                        {
                            name: '村5',
                            id: '10'
                        }
                    ];

                    resolve(arr);
                }, 1000);
            }

        },

我这里做的是模拟只有两层tree数据来做的，当你项目中不确定有几层数据时就要修改loadNode方法啦。 

三. 不确定层数

loadNode(node, resolve) {
    let _this = this;
    console.log('------node-----', node);   // 获取点击tree结构数据
    if (node.level === 0) {
       _this.handlegettreeData(resolve);
    }
    if (node.level > 1) {
       _this.handlegettreeData(resolve, node.data.id);
    }
},

// 获取tree结构数据
        handlegettreeData(resolve,zjid) {
            console.log('----error-----', zjid);

            // tree结构第一级数据
            if (!zjid) {
                let arr = [
                    {
                        name: '马池口镇',
                        id: '1'
                    },
                    {
                        name: '南口镇',
                        id: '2'
                    },
                    {
                        name: '白泉镇',
                        id: '3'
                    },
                    {
                        name: '白浮镇',
                        id: '4'
                    },
                    {
                        name: '大涨镇',
                        id: '5'
                    }
                ];
                
                resolve(arr);
                
            } else {
                let arr = [];  // 代表请求后端返回的数据
                if(arr.length > 0) {
                    resolve(arr)
                }else {
                    resolve([]);
                }
            }

        },

上面loadNode 方法在获取一级数据之后，根据当前点击tree数据里的值来进行请求 有我们就传值，后端就会根据值来对应返回数据。这时我们就要根据是否有值来操作resolve();这个构造函数。