自己封裝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')
        }