如何正确使用element-ui中tree组件

话不多说，直接上干货。原创禁止转载~ 谢谢

模板部分

<template>
    <el-tree
        v-loading="loading"
        class="filter-tree"
        :data="treeData"
        :props="lazyProps"
        :load="loadNode"
        ref="tree"
        lazy
    >el-tree>
template>

js代码块

如果要实现tree组件以及懒加载功能，有必要了解一下其需要哪些属性及方法。

lazyProps: 属性配置对象，如：
children: 子节点, 类型Array;
label：显示的标签名；
isLeaf: 是否提前告知tree组件有子节点。

export default {
    data() {
        return {
            treeData: [],
            lazyProps: { // 映射关系
                children: 'childrens',
                label: 'orgName',
                isLeaf: 'leaf'
            },
            loading: false
        };
    },
    methods: {
        loadNode(node, resolve) {
            //如果展开第一级节点，从后台加载一级节点子列表
            if (node.level == 0) {
                this.getTreeData('', resolve); // 这里返回的格式为 [{...}]
            }
            //如果展开其他级节点，动态从后台加载其下一级节点列表
            if (node.level > 0) {
                setTimeout(() => {
                    this.getTreeData(node.data.id, resolve); // 这里返回的是子节点childens集合
                }, 200);
            }
        },
        /**
		* 这里通过id动态传入的方式获取treeData：
		* 当id为空时，加载一级节点。就是总数据集合。
		* 当id不为空时，则动态加载当前节点的子节点集合
        */
        getTreeData(id, resolve) {
            this.loading = true;
            this.$axios
                .get(`/test/workWeixin/queryChildrens?id=${id}`)
                .then(res => {
                    // id有值表示查找当前子节点集合，无值表示查找所有数据。 arr必须是数组(组件要求的格式)
                    // 这里的childrens 则与lazyProps中的childrens相对应，为子节点集合
                    let arr = !!id ? res.data.childrens : [res.data];
                    arr.forEach(el => {
                        // 通过hasNaxt字段判断是否有子集，告知tree组件是否需要渲染展开箭头，这里的leaf则与lazyProps中的leaf相对应
                        el.leaf = el.hasNaxt ? false : true;
                    });
                    this.loading = false;
                    resolve(arr);
                });
        },

	}
}

结语：

如果对你有帮助的话，记得点个赞呀~ 十分感谢