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

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

一、简单版本

  1         data() {
  2             return {
  3                 shopsData: [],
  4                 arrData: [{
  5                     label: '一级 1',
  6                     children: [{
  7                         label: '二级 1-1',
  8                         children: [{
  9                             label: '三级 1-1-1'
 10                         }]
 11                     }]
 12                 }, {
 13                     label: '一级 2',
 14                     children: [{
 15                         label: '二级 2-1',
 16                         children: [{
 17                             label: '三级 2-1-1'
 18                         }]
 19                     }, {
 20                         label: '二级 2-2',
 21                         children: [{
 22                             label: '三级 2-2-1'
 23                         }]
 24                     }]
 25                 }, {
 26                     label: '一级 3',
 27                     children: [{
 28                         label: '二级 3-1',
 29                         children: [{
 30                             label: '三级 3-1-1'
 31                         }]
 32                     }, {
 33                         label: '二级 3-2',
 34                         children: [{
 35                             label: '三级 3-2-1'
 36                         }]
 37                     }]
 38                 }]
 39             }
 40         },
 41         methods: {
 42             filterByName(menu, type, name) { //过滤树组件
 43                 var menuNew = [];
 44                 for (var i = 0; i < menu.length; i++) {
 45                     var nodeNew = undefined;
 46                     var node = menu[i]; //同级的每一个根节点
 47                     var childrenNode = node.children; //子节点
 48                     var childrenMenu = [];
 49 
 50                     if (childrenNode) {
 51                         if (childrenNode.length > 0) { //子节点下面的子节点递归
 52                             childrenMenu = this.filterByName(childrenNode, type, name);
 53                         }
 54                     }
 55 
 56                     if (childrenMenu) {
 57                         if (childrenMenu.length > 0) {
 58                             nodeNew = new Object();
 59                             nodeNew = this.nodeFillNewFromOld(node, nodeNew);
 60                             nodeNew.sublist = childrenMenu; //复制子节点
 61                         } else {
 62                             if (this.checkNodeEquals(node, type, name)) {
 63                                 nodeNew = new Object();
 64                                 nodeNew = this.nodeFillNewFromOld(node, nodeNew);
 65                             }
 66                         }
 67                     }
 68                     if (nodeNew) {
 69                         menuNew.push(nodeNew);
 70                     }
 71                 }
 72 
 73                 return menuNew;
 74             },
 75             nodeFillNewFromOld(oldNode, newNode) { //添加属性
 76                 newNode.disabled = oldNode.disabled;
 77                 newNode.enabled = oldNode.enabled;
 78                 newNode.level = oldNode.level;
 79                 newNode.name = oldNode.name;
 80                 newNode.onlyHasShop = oldNode.onlyHasShop;
 81                 newNode.orgType = oldNode.orgType;
 82                 newNode.orgcode = oldNode.orgcode;
 83                 newNode.parentCode = oldNode.parentCode;
 84                 newNode.prmType = oldNode.prmType;
 85                 newNode.showPage = oldNode.showPage;
 86                 newNode.children = oldNode.children;
 87 
 88                 return newNode;
 89             },
 90             checkNodeEquals(node, type, name) { //过滤条件
 91                 if (node.type === 2) {
 92                     node.disabled = true
 93                 }
 94                 if (node.orgcode.indexOf(name) === 0) {
 95                     return true;
 96                 } else {
 97                     return false;
 98                 }
 99             }
100         },
101         mounted() {
102             this.shopsData = this.filterByName(this.arrData, 'label', '二级 2-1');
103         }

二、升级版本

 1         filterTree(nodes, predicate, childKey = 'children') { //predicate过滤条件函数
 2             if (!nodes || !nodes.length) return void 0
 3             const children = []
 4             for (let node of nodes) {
 5                 node = Object.assign({}, node)
 6                 const sub = this.filterTree(node[childKey], predicate, childKey)
 7                 if ((sub && sub.length) || predicate(node)) {
 8                     sub && (node[childKey] = sub)
 9                     children.push(node)
10                 }
11             }
12             return children.length ? children : void 0
13         },
14         shopfilterNode(data) { //过滤条件
15             if (data.orgType === 2) {
16                 data.disabled = true
17             }
18             return data.prmType >= 0 && data.orgcode.indexOf(this.groupcode) === 0;
19         },
20         mounted() {
21             this.shopsData = this.filterTree(this.arrData, this.shopfilterNode, 'sublist')
22         }

 

 
posted @ 2019-03-21 15:48  super_素素  阅读(3081)  评论(0)  编辑  收藏  举报