# 全部展开/折叠
:default-expand-all="defaultExpandAll"
1
defaultExpandAll:false,//控制树形组件的打开收缩
buttonName: '收缩',
//控制树形控件的打开收缩
openTree(){
this.defaultExpandAll= !this.defaultExpandAll;
this.buttonName= this.defaultExpandAll ?'收缩' :'展开'
for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
this.$refs.tree.store._getAllNodes()[i].expanded =this.defaultExpandAll;
}
},
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 设置选中
<el-tree
ref="tree"
:data="treeData"
show-checkbox
node-key="id"
:check-strictly="true"
:default-checked-keys="defaultArr"
:props="defaultProps"
:default-expand-all="defaultAll"
/>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
//data
treeData: [],
defaultProps: {
children: 'children',
label: 'name'
},
defaultArr: [], // 角色拥有的权限
defaultAll: true, // 是否默认展开所有节点
methods:{
// 角色拥有的权限
getFunctionTree() {
this.defaultArr = []
functionTree({
roleId: this.roleId
})
.then(({ data }) => {
this.treeData = data
this.formatTree(this.treeData)
})
},
// 循环所有勾选了的id
formatTree(tree) {
tree.forEach((item, i) => {
// 如果只有一级且不再默认勾选的数组内
if (item.isChecked == 1 && !this.defaultArr.includes(item.id)) {
this.defaultArr.push(item.id)
}
// 如果还有下一级
if (item.children) {
if (item.children.length > 0) {
this.isChecked(item)
this.formatTree(item.children)
}
}
})
},
isChecked(item) {
if (item.isChecked == 1 && !this.defaultArr.includes(item.id)) {
this.defaultArr.push(item.id)
}
},
}
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
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
← 权限控制 watch(侦听器) →