el-tree目录全展开/收起及状态判断

背景

前段时间遇到这个需求, element-ui 原生没有这种支持, 遂去网上寻找, 没想到找到的方法基本全有问题, 没有考虑el-tree 展开收起时对 childNodes 的判断,故记录一下, 免得有类似需求的同学浪费时间.

实现

全部展开/收起

changeTreeNodeExpand(childNodes, status) {
    childNodes.forEach(child => {
        if (child.childNodes.length > 0) {
            child.expanded = status;
            this.changeTreeNodeExpand(child.childNodes, status);
        }
    });
}
// 调用
changeTreeNodeExpand(this.$refs.treeRef.store.root.childNodes,status)

状态判断

对树的操作只有展开和收起两类, 收起操作说明必定是不完全展开状态, 所以只需处理展开操作即可.

<el-tree @node-expand="setIsAllExpanded" @node-collapse="isAllExpanded = false"></el-tree>

setIsAllExpanded(){
	this.isAllExpanded = this.checkIfNodesExpanded(
		this.$refs.treeRef.store.root.childNodes
	);
}

checkIfNodesExpanded(nodes) {
    return nodes.every(({ childNodes, expanded }) => {
    	if (childNodes.length === 0) {
            if (expanded === false) {
                return true;
            }
        } else if (expanded === true) {
            return this.checkIfNodesExpanded(childNodes);
        }
        return false;
    });
}

如果有别的操作改变了树的状态, 同样调用 setIsAllExpanded 即可