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