el-tree设置默认展开节点后，el-tree点击节点不能关闭（触发node-collapse事件，节点无法关闭）_el-tree点击事件阻止

修改，不用管下面的废话，点击这里

昨天写了一堆废话，其实就是要展开子节点，那么其父节点必然展开，所以导致关闭不了。今天无事看官方文档，发现官方给了属性控制，修改则完成。。。。。。。

<el-tree :auto-expand-parent="false"></el-tree>
1

昨天问题直接解决。。。。。。。。。。。。。

问题描述

本篇文章闲话较多，没事写了写自己的思路经过

项目中使用到el-tree， 考虑到数据量还是有这么大，就想将用户对节点的操作保存下来（保存用户已点击展开的节点id，在下一次进入或刷新后，对其进行默认展开操作）
问题：在后面测试中发现点击第一级展开的某些节点，节点竟然无法关闭。。。。。

解决步骤

问题排查

思路1

因为想到自己绑定了el-tree的节点关闭事件（node-collapse），所以首先考虑是自己写的某行代码出了问题。代码如下

//data为节点对应的数据, uuid为节点绑定的node-key
nodeCollapse(data) {
  if(!data.uuid) {
    return
  }
  let tempSet = new Set(this.defaultExpandNode);
  tempSet.delete(data.uuid)
  this.defaultExpandNode = [...tempSet]
  localStorage.setItem('orgDefaultExpandNode', JSON.stringify(this.defaultExpandNode))
},
1
2
3
4
5
6
7
8
9
10

首先我取消对el-tree节点关闭事件的绑定，这时不论点击展开多少个节点，回来再点击第一级节点进行关闭是没有问题的，那么我判定还是绑定的节点关闭事件里出了问题

思路2

在对绑定事件的nodeCollapse函数进行反复检查后，发现逻辑并没有问题，打印各项数据，也是感觉没问题的。可是点击第一级节点依然无法关闭。。。。
这个时候我开始去找能关闭和不能关闭节点间的不同之处，发现不能关闭的节点往往是因为其子节点处于展开状态
这个时候去看了element-ui的官方文档，发现人家例子里，就算子节点是展开的，点击父节点也是可以关闭的。。。。。

思路3

上面得出了肯定是展开的子节点引起的问题，然后再研究研究了自己的代码发现，我在每次节点点击展开时，都对其uuid进行了存储，用以进行设置默认展开的节点。
首先我存储了一个节点以及它下面的一个子节点的uuid。倘若我想点击关闭该节点时，在el-tree的default-expanded-keys中又绑定了其子节点的uuid。这个时候，点击该节点进行关闭就是无效的。

解决方案

我本来的意愿是想将每个展开的节点都进行保存，所以首先想出的解决方案是：在对一个节点进行点击关闭时，将其所有子节点的uuid都从存储中清除
但由于数据的复杂度，能实现但没必要，这个想法我就放弃了

然后在测试中发现，el-tree已经将用户对节点的展开操作做了保存，如：
A节点下有B、C节点，并且我把B、C节点也进行展开，这个时候，当我直接关闭A节点，再将A节点进行展开时，B、C节点依旧是展开状态。（同理，如果只展开了B节点，就直接关闭了A节点再展开，那么就只有B节点是展开的，而C节点处于关闭状态）

所以最终我决定只关注到el-tree的第一级的展开关闭，代码如下

/**
* 保存当前已展开的节点，下一次进行默认展开
*/
// 节点展开触发事件
nodeExpand(data) {
  //只收集第一级的节点展开
  if(!data.uuid || data.type !== 0 || data.level !== 1) {
    return
  }
  let tempSet = new Set(this.defaultExpandNode);
  tempSet.add(data.uuid)
  this.defaultExpandNode = [...tempSet]
  localStorage.setItem('orgDefaultExpandNode', JSON.stringify(this.defaultExpandNode))
},
// 节点关闭触发事件
nodeCollapse(data) {
  //只关注第一级的节点关闭
  if(!data.uuid || data.type !== 0 || data.level !== 1) {
    return
  }
  let tempSet = new Set(this.defaultExpandNode);
  tempSet.delete(data.uuid)
  this.defaultExpandNode = [...tempSet]
  localStorage.setItem('orgDefaultExpandNode', JSON.stringify(this.defaultExpandNode))
},
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

最后解决问题

总结

1. el-tree的default-expanded-keys属性，如果你绑定了某个节点，那么它的父节点，就必须也处于展开的状态，并且如若你不对其进行清除操作，那么你点击它的父节点进行关闭就是无效的。
2. el-tree会将用户对节点的展开进行保存（刷新页面后会进行清除）
3. 今天一不小心写了太多废话，下次少写点哈哈哈哈哈哈哈