vxe-table树形结构树的一键展开和折叠卡顿--已解决

结构树的一键展开和折叠

优化前:

使用递归每次打开节点,速度慢卡顿。

优化后:

  • 针对根节点的使用setAllTreeExpandclearTreeExpand
  • 针对其他节点的特殊处理,有两步:
    第一步:使用递归获取到当前节点下的所有子孙节点,写一个算法算出rows
    第二步:使用setTreeExpand(rows, checked)checked就是展示或者折叠。
### 关于 vxe-table 结构只取消选中节点的展开状态 在 vxe-table树形结构操作中,如果希望仅关闭选中的结构数据而不影响其他未被选中的部分,可以采用特定方法来实现这一需求。对于此目的,主要思路是先识别哪些节点已被选中,随后通过 API 调用来控制这些节点的状态。 当目标是在不干扰其余节点的情况下收起某些选定节点时,可利用 `getCheckedNodes` 方法获取所有勾选过的节点列表[^2]。接着遍历这个列表并调用 `setTreeExpand(row, false)` 来单独设置每一个指定节点为折叠状态。这里需要注意的是,直接作用于单个节点而非整体能够有效减少不必要的重绘次数从而提高性能表现。 为了更精确地管理子级节点的行为,在执行上述动作之前还可以考虑收集所有待处理节点及其后代的信息。这可以通过编写辅助函数完成,该函数接收父节点作为参数并通过递归方式访问其下所有的孩子节点直到最底层叶节点为止。一旦获得了完整的路径集合,则可以在后续步骤里批量应用收缩命令给定范围内的每一项成员。 ```javascript // 获取所有选中的节点 const selectedRows = table.getCheckedNodes(); // 定义一个用于存储要折叠的所有节点(含子孙) let rowsToCollapse = []; function collectDescendants(node) { // 如果存在children属性则继续深入查找 if (node.children && node.children.length > 0) { rowsToCollapse.push(...node.children); node.children.forEach(child => collectDescendants(child)); } } selectedRows.forEach(selectedRow => { // 收集当前选中行本身以及它的所有后代 rowsToCollapse.push(selectedRow); collectDescendants(selectedRow); // 对找到的所有节点执行折叠操作 table.setTreeExpand(rowsToCollapse, false); }); ``` 这段代码展示了如何定位到用户所选择的具体位置,并安全有效地调整它们各自的可见性而不会引起界面响应上的延迟或阻塞现象。这种方法不仅提高了用户体验流畅度,同时也遵循了最佳实践原则——即尽可能减小对整个表格视图的影响幅度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

King's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值