search

wchbrad / vue-easy-tree

A tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling.
MIT License
130 stars 40 forks source link

处理大数据量的虚拟tree时，解决卡顿的潜在方案 #20

Closed TaurusHoKa closed 1 year ago

long36708 commented 1 year ago

一级节点5000条，赋值勾选耗时: 19636.64501953125 ms 5个一级节点分别为1000、1000、1000、1000、1000时，赋值勾选耗时: 4703.28173828125 ms

与数据的结构有关，同时，使用forEach循环设置，耗时会少些，但是仍然卡顿 checkedKeys.forEach(key => { self.$refs.longTree.setChecked(key, true); // 赋值勾选耗时: 10983.7060546875 ms })

self.$refs.longTree.setCheckedKeys(checkedKeys); //赋值勾选耗时 27492.218017578125 ms

wchbrad commented 1 year ago

如果是想一次全选，可以使用this.$refs['treeSelect'].setCheckedAll(true)，全不选使用this.$refs['treeSelect'].setCheckedAll(false) 如果是只勾选想要的节点且不考虑半选，可以用下列方法： const checkedKeys = Array.from(Array(1000).keys()).map((num) => num.toString() ) const allNodes = this.$refs["veTree"].store._getAllNodes();

  for (const node of allNodes) {
    if (checkedKeys.includes(node.key)) {
      node.checked = true;
    }
  }