自己封装element-ui树组件的过滤

前言：vue开发项目时用到了element-ui的树组件，但是发现一执行过滤事件，树就全部都展开了，为了解决这个问题，只能自己先过滤数剧，再赋值给树组件的data，就避免了一上来全部展开的尴尬。

一、简单版本

        data() {
            return {
                shopsData: [],
                arrData: [{
                    label: '一级 1',
                    children: [{
                        label: '二级 1-1',
                        children: [{
                            label: '三级 1-1-1'
                        }]
                    }]
                }, {
                    label: '一级 2',
                    children: [{
                        label: '二级 2-1',
                        children: [{
                            label: '三级 2-1-1'
                        }]
                    }, {
                        label: '二级 2-2',
                        children: [{
                            label: '三级 2-2-1'
                        }]
                    }]
                }, {
                    label: '一级 3',
                    children: [{
                        label: '二级 3-1',
                        children: [{
                            label: '三级 3-1-1'
                        }]
                    }, {
                        label: '二级 3-2',
                        children: [{
                            label: '三级 3-2-1'
                        }]
                    }]
                }]
            }
        },
        methods: {
            filterByName(menu, type, name) { //过滤树组件
                var menuNew = [];
                for (var i = 0; i < menu.length; i++) {
                    var nodeNew = undefined;
                    var node = menu[i]; //同级的每一个根节点
                    var childrenNode = node.children; //子节点
                    var childrenMenu = [];

                    if (childrenNode) {
                        if (childrenNode.length > 0) { //子节点下面的子节点递归
                            childrenMenu = this.filterByName(childrenNode, type, name);
                        }
                    }

                    if (childrenMenu) {
                        if (childrenMenu.length > 0) {
                            nodeNew = new Object();
                            nodeNew = this.nodeFillNewFromOld(node, nodeNew);
                            nodeNew.sublist = childrenMenu; //复制子节点
                        } else {
                            if (this.checkNodeEquals(node, type, name)) {
                                nodeNew = new Object();
                                nodeNew = this.nodeFillNewFromOld(node, nodeNew);
                            }
                        }
                    }
                    if (nodeNew) {
                        menuNew.push(nodeNew);
                    }
                }

                return menuNew;
            },
            nodeFillNewFromOld(oldNode, newNode) { //添加属性
                newNode.disabled = oldNode.disabled;
                newNode.enabled = oldNode.enabled;
                newNode.level = oldNode.level;
                newNode.name = oldNode.name;
                newNode.onlyHasShop = oldNode.onlyHasShop;
                newNode.orgType = oldNode.orgType;
                newNode.orgcode = oldNode.orgcode;
                newNode.parentCode = oldNode.parentCode;
                newNode.prmType = oldNode.prmType;
                newNode.showPage = oldNode.showPage;
                newNode.children = oldNode.children;

                return newNode;
            },
            checkNodeEquals(node, type, name) { //过滤条件
                if (node.type === 2) {
                    node.disabled = true
                }
                if (node.orgcode.indexOf(name) === 0) {
                    return true;
                } else {
                    return false;
                }
            }
        },
        mounted() {
            this.shopsData = this.filterByName(this.arrData, 'label', '二级 2-1');
        }

二、升级版本

        filterTree(nodes, predicate, childKey = 'children') { //predicate过滤条件函数
            if (!nodes || !nodes.length) return void 0
            const children = []
            for (let node of nodes) {
                node = Object.assign({}, node)
                const sub = this.filterTree(node[childKey], predicate, childKey)
                if ((sub && sub.length) || predicate(node)) {
                    sub && (node[childKey] = sub)
                    children.push(node)
                }
            }
            return children.length ? children : void 0
        },
        shopfilterNode(data) { //过滤条件
            if (data.orgType === 2) {
                data.disabled = true
            }
            return data.prmType >= 0 && data.orgcode.indexOf(this.groupcode) === 0;
        },
        mounted() {
            this.shopsData = this.filterTree(this.arrData, this.shopfilterNode, 'sublist')
        }