ElementUI el-tree一键折叠或展开

后端

value作为键

package com.dam.model.vo.shiftScheduling;

import lombok.Data;

import java.util.List;

/**
 * 将任务以 年 月 区分开来
 */
@Data
public class TaskCreateTimeTreeItemVo {
    private Long value;
    private String label;
    private List<TaskCreateTimeTreeItemVo> children;

    public TaskCreateTimeTreeItemVo(Long value, String label) {
        this.value = value;
        this.label = label;
    }
}

前端

html

<div style="padding: 5px;">
    <span style="margin-right: 20px;margin-left:15px;font-weight: bold;">时间树</span>
    <el-button id="button-black" style="font-weight: bold;" type="text" icon="iconfont icon-expand" v-if="isExpand==false"
        size="mini" @click="foldOrExpand()"></el-button>
    <el-button id="button-black" style="font-weight: bold;" type="text" icon="iconfont icon-zhedie" v-if="isExpand==true"
        size="mini" @click="foldOrExpand()"></el-button>
</div>
<div>
    <el-tree class="filter-tree" :data="dateTree" :props="defaultProps" :filter-node-method="filterNode"
        :default-expanded-keys="treeExpandedKeyArr" @node-click="handleNodeClick" ref="dateTree"
         node-key="value">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <i class="iconfont icon-nianfen" v-if="(node.label + '').indexOf('年') != -1"></i>
            <i class="iconfont icon-yuefen" v-if="(node.label + '').indexOf('月') != -1"></i>
            <span style="font-size: 14px;margin-left: 5px;">{{ node.label }}</span>
        </span>
    </el-tree>
</div>

js

        // 一键折叠/展开
        foldOrExpand() {
            this.isExpand = !this.isExpand
            this.expandFunc(this.dateTree)
        },
        // 遍历树形数据，通过设置每一项的expanded属性，实现展开与折叠
        expandFunc(data) {
            data.forEach(item => {
                this.$refs.dateTree.store.nodesMap[item.value].expanded = this.isExpand
                if (item.children != null && item.children.length > 0) {
                    this.expandFunc(item.children)
                }
            })

        },

效果