el-tree设置默认展开节点后,el-tree点击节点不能关闭(触发node-collapse事件,节点无法关闭)

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

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

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

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

问题描述

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

项目中使用到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))
},

首先我取消对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. el-tree的default-expanded-keys属性,如果你绑定了某个节点,那么它的父节点,就必须也处于展开的状态,并且如若你不对其进行清除操作,那么你点击它的父节点进行关闭就是无效的。
  2. el-tree会将用户对节点的展开进行保存(刷新页面后会进行清除)
  3. 今天一不小心写了太多废话,下次少写点哈哈哈哈哈哈哈
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值