闲暇时间记录一下项目中用到的框架及实现思路，留作笔记
vue的element-ui框架tree的使用
1 | <el-input suffix-icon="fa fa-search" |
1 | .online{ |
getCurrentNode()
- 获取当前被选中节点的 data，若没有节点被选中则返回 null
1
let curNode = this.$refs.tree_org.getCurrentNode();
setCurrentKey根据tree的key值选中节点并且高亮
1
this.$refs.tree_org.setCurrentKey(curNode.key);
打开关闭全部tree节点
1
2
3
4
5
6
7
8
9
10
11//打开全部tree节点
openAllTreeNode(){
for(var i=0;i<this.$refs.tree_org.store._getAllNodes().length;i++){
this.$refs.tree_org.store._getAllNodes()[i].expanded=true;
}
},
closeTreeNode(){
for(var i=0;i<this.$refs.tree_org.store._getAllNodes().length;i++){
this.$refs.tree_org.store._getAllNodes()[i].expanded=false;
}
},树查询的时候保留查询节点的子节点数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22//优化之后的代码 不管有几级都可以适用
filterNode(value,data,node) {
if(!value){
return true;
}
let level = node.level;
let _array = [];//这里使用数组存储 只是为了存储值。
this.getReturnNode(node,_array,value);
let result = false;
_array.forEach((item)=>{
result = result || item;
});
return result;
},
getReturnNode(node,_array,value){
let isPass = node.data && node.data.projectName && node.data.projectName.indexOf(value) !== -1;
isPass?_array.push(isPass):'';
this.index++;
if(!isPass && node.level!=1 && node.parent){
this.getReturnNode(node.parent,_array,value);
}
},render自定义节点加点击事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67//自定义tree节点
renderContent(h, options) {
var that = this;
//console.log(options)
if (options.data.status == '在线') {
return h('span', [
h('i', {
attrs: {
class: 'online'
}
}, ''),
h('span', {}, ''),
h('span', {
domProps: {
innerHTML: options.data.projectName
}
})
]
);
} else if (options.data.status == '离线') {
return h('span', [
h('i', {
attrs: {
class: 'offline'
}
}, ''),
h('span', {}, ''),
h('span', {
domProps: {
innerHTML: options.data.projectName
}
})
]
);
} else {
return h('span', [
h('i', {
attrs: {
class: 'bumenGroup'
}
}, ''),
h('span', {}, ''),
h('span', {
domProps: {
innerHTML: options.data.projectName
},
on: {
dblclick: function () {
var result = options.data;
if (result.projectCode && result.children) {
that.stopPlay();
var child = result.children;
var len = result.children.length;
if (len > 1 && len <= 4) {
that.creatDiv(4);
for (var i = 0; i < len; i++) {
that.change(child[i]);
}
}
}
}
}
})
]
);
}
},tree过滤后展示搜索的下级节点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22//优化之后的代码 不管有几级都可以适用
filterNode(value,data,node) {
if(!value){
return true;
}
let level = node.level;
let _array = [];//这里使用数组存储 只是为了存储值。
this.getReturnNode(node,_array,value);
let result = false;
_array.forEach((item)=>{
result = result || item;
});
return result;
},
getReturnNode(node,_array,value){
let isPass = node.data && node.data.projectName && node.data.projectName.indexOf(value) !== -1;
isPass?_array.push(isPass):'';
this.index++;
if(!isPass && node.level!=1 && node.parent){
this.getReturnNode(node.parent,_array,value);
}
},
