el-tree懒加载 一键展开所有子节点

html页面

<div id="app">
    <el-container style="width: 100%;margin-top:10px;">
        <el-aside width="350px">
            <div style="padding-left: 20px;">
                <el-button @click="expandAll()" type="info" icon="el-icon-folder-opened" :size="size">全部展开
                </el-button>
            </div>
            <div style="padding: 20px;">
                <el-input :size="size" placeholder="输入节点名称进行搜索" clearable
                          v-model="filterTreeText"></el-input>
                <el-tree class="my-el-tree" highlight-current ref="elTree" :props="defaultProps"
                         @node-click="handleNodeClick"
                            accordion
                         :draggable="draggable" :allow-drag="allowDrag" :allow-drop="allowDrop"  @node-drop="handleDrop"
                         :default-expand-all="expandNode" :filter-node-method="filterNode" lazy :load="loadNode"
                         node-key="id">
                </el-tree>
            </div>
        </el-aside>
        <template>
            <el-tabs v-model="activeName" style="width: 100%;">
                <el-tab-pane label="节点" name="first">
                    <iframe ref="first" id="editServiceCenter" :height="height"
                            :src="editServiceCenterSrc" style="width: 100%;border-width: 0px;border-style: inset;border-color: initial;border-image: initial;"></iframe>
                </el-tab-pane>
                <el-tab-pane label="管理" name="second">
                    <iframe ref="second" id="serviceCenterUser" :height="height"
                            :src="serviceCenterUserSrc" style="width: 100%;border-width: 0px;border-style: inset;border-color: initial;border-image: initial;"></iframe>
                </el-tab-pane>
            </el-tabs>
        </template>
    </el-container>

</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            height: document.documentElement.clientHeight - 40 + 'px',
            loading: false,
            activeName: 'first',
            size: population_size,
            listId: "", //点击树的id,
            filterTreeText: "",//树搜索框
            expandNode: true,
            draggable:true,
            editServiceCenterSrc: "",
            serviceCenterUserSrc: "",
            defaultProps: {
                children: 'children',
                label: 'name',
                isLeaf: "leaf"
            },
        },
        watch: {
        	//树搜索
            filterTreeText: function(val) {
                this.$refs.elTree.filter(val);
            },
        },
        methods: {
            loadNode: function (node, resolve) {
                if (node.level === 0) {
                    $.ajax({
                        type: "POST",
                        url: "commTree",
                        data: {parentId: "${id}", isRoot: true},
                        dataType: "JSON",
                        success: function (data) {
                            resolve(data);
                            vue.$refs.elTree.setCurrentKey(data[0].id);
                            vue.handleNodeClick(data[0],node);
                        },
                        error: function (data) {
                            vue.$message({
                                showClose: true,
                                offset: message_offset_from_top,
                                message: data.responseJSON.result.solution,
                                type: error
                            });
                        }
                    });
                } else if (node.level != 0 && !node.data.leaf) {//查出的数据中的leaf为是否为叶子节点true or false
                    $.ajax({
                        url: 'commTree',
                        data: {parentId: node.data.id},
                        async: false,
                        type: "POST",
                        dataType: "JSON",
                        success: function (data) {
                            resolve(data);
                            if(node.level == 1){
                                node.expanded = true;
                            }else{
                                node.expanded = false;
                            }
                        },
                        error: function (data) {
                            vue.$message({
                                showClose: true,
                                offset: message_offset_from_top,
                                message: data.responseJSON.result.solution,
                                type: error
                            });
                        }
                    });
                } else {
                    resolve([]);
                    node.expanded = false;
                }
            },
            //树节点点击加载列表
            handleNodeClick: function (data, node, obj) {
                vue.$refs.elTree.setCurrentKey(data.id);
                this.listId = data.id;
                this.editServiceCenterSrc = '../editOrg?id=' + this.listId;
                this.serviceCenterUserSrc = '../index?dataid=' + this.listId;
                if(node && node.isLeaf==false){
                    node.expanded = true;
                }
            },
            //树过滤
            filterNode: function(value, data, node) {
                if (!value) return true;
                var b = data.name.indexOf(value) !== -1;
                if(b){
                    node.expanded = true;
                }
                return b;
            },
            // 刷新树节点
            refreshTreeNode: function (id) {
                if (id) {
                    let node_ = this.$refs.elTree.getNode(id)
                    node_.loaded = false;
                    node_.loadData();
                    node_.expand();
                }
            },
            // 刷新树节点的父节点
            refreshParentTreeNode: function (id) {
                if (id) {
                    let node_ = this.$refs.elTree.getNode(id);
                    node_ =  this.$refs.elTree.getNode(node_.data.parentid);
                    node_.loaded = false;
                    node_.loadData();
                    node_.expand();
                }
            },
            // 刷新树当前节点名称
            refreshCurrentTreeNode: function (id,name) {
                if (id) {
                    let node_ = this.$refs.elTree.getNode(id)
                    node_.data.name = name;
                }
            },
            //全部展开
            expandAll: function () {
                const tree = this.$refs.elTree;
                if (tree) {
                    this.expandAllNodes(tree.store.root.childNodes);
                }
            },
            expandAllNodes: function (nodes) {
                for (let node of nodes) {
                    if (node.childNodes && !node.expanded) {
                        node.expand();
                    }
                    if (node.childNodes && node.childNodes.length > 0) {
                        this.expandAllNodes(node.childNodes);
                    }
                }
            },
            allowDrag: function(draggingNode){
                return draggingNode.isLeaf == true;
                //return false;
            },
            allowDrop: function(draggingNode, dropNode, type) {
                return type === 'inner';
            },
            //拖拽
            handleDrop: function(draggingNode, dropNode, dropType, ev) {
                if(dropType=='inner'){
                    if (draggingNode.data.parentid == dropNode.data.id) {
                        vue.$message({
                            showClose: true,
                            offset: message_offset_from_top,
                            message: "已经在该节点下",
                            type: 'error'
                        });
                    }else{
                        var data = {};
                        data.fromId = draggingNode.data.id; //拖拽的树节点id
                        data.toId = dropNode.data.id;//拖拽到关联的树节点id
                        $.ajax({
                            type: "POST",
                            url: "moveNodes",
                        data: data,
                        dataType: "json",
                        async: false,
                        success: function (returnValue) {
                            vue.$message({
                                showClose: true,
                                offset: message_offset_from_top,
                                message: returnValue.msg,
                                type: returnValue.success ? "success" : "error"
                            });
                            vue.refreshTreeNode(draggingNode.data.parentid);
                            vue.refreshTreeNode(dropNode.data.parentid);
                        },
                        error: function () {
                            vue.$message({
                                showClose: true,
                                offset: message_offset_from_top,
                                message: '操作错误,查看错误日志!',
                                type: 'error'
                            });
                        }
                    });
                    }
                }
            },
        },
        mounted:function(){
            window.addEventListener('resize',()=>{
                this.height = document.body.clientHeight-40 + 'px';
            });
        },
    })
</script>

java后台处理

 @RequestMapping(value = "/commTree", produces = "application/json;charset=UTF-8")
    //获取所有组织
    public List<Map<String, Object>> commTree(@RequestParam String parentId, @RequestParam(required = false) Boolean isRoot) {
        Map<String, Object> param = new HashMap<>();
        if (parentId == null || (isRoot != null && isRoot)) {
            param.put("id", parentId);
        } else {
            param.put("parentid", parentId);
        }
        List<Map<String, Object>> list = organServices.findList(param);
        for (Map<String, Object> map : list) {
            Integer count = (Integer)map.get("childcount");
            map.put("isParent", count > 0);
            map.put("leaf", !(count > 0));
        }
        return list ;
    }

展示效果