hy-virtual-tree 1.1.23 → 1.1.25

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 ## Changelog
 
+### 1.1.25
+
+_2025-09-13_
+
+- 扩展[VirtualTree] 功能
+（1）树节点添加缓存逻辑
+
+### 1.1.24
+
+_2025-09-13_
+
+- 扩展[VirtualTree] 功能
+（1）优化刷新销毁逻辑
+
 ### 1.1.23
 
 _2025-09-13_

package/dist/index.js

@@ -11,6 +11,7 @@ class VirtualScroll {
      * @param {number} [options.maxHeight=26840000] Maximum height in pixels for the content wrapper
      * @param {Function} [options.onRender] 节点刷新回调
      */
+    cacheNodeMap = new Map();
     constructor(options) {
         this.container = options.container;
         this.items = options.items || [];
@@ -115,10 +116,13 @@ class VirtualScroll {
     renderVisibleItems(startIndex, endIndex) {
         this._onRender && this._onRender();
         // Clear content container
-        this.contentContainer.innerHTML = '';
+        // this.contentContainer.innerHTML = ''
         // Set position considering scaling factor
+        // const fragment = document.createDocumentFragment()
+        // const fragment = []
         this.contentContainer.style.transform = `translateY(${startIndex * this.itemHeight * this.heightScale}px)`;
         // Render visible items
+        const nodeMap = new Map();
         for (let i = startIndex; i < endIndex; i++) {
             const item = this.items[i];
             if (this.customRenderItem) {
@@ -129,7 +133,17 @@ class VirtualScroll {
                     itemElement.style.height = `${this.itemHeight * this.heightScale}px`;
                     itemElement.style.boxSizing = 'border-box';
                     itemElement.style.width = '100%';
-                    this.contentContainer.appendChild(itemElement);
+                    const innerHTML = itemElement.innerHTML;
+                    if (this.cacheNodeMap.has(innerHTML)) {
+                        const target = this.cacheNodeMap.get(innerHTML);
+                        this.contentContainer.appendChild(target);
+                        nodeMap.set(innerHTML, target);
+                        this.cacheNodeMap.delete(innerHTML);
+                    }
+                    else {
+                        this.contentContainer.appendChild(itemElement);
+                        nodeMap.set(innerHTML, itemElement);
+                    }
                 }
             }
             else {
@@ -146,6 +160,11 @@ class VirtualScroll {
                 this.contentContainer.appendChild(row);
             }
         }
+        for (const [key, value] of this.cacheNodeMap) {
+            this.contentContainer.removeChild(value);
+        }
+        this.cacheNodeMap.clear();
+        this.cacheNodeMap = nodeMap;
     }
     /**
      * Update data items and re-render
@@ -480,7 +499,7 @@ const useConfig = (config) => {
     config = {
         itemHeight: 30,
         itemGap: 10,
-        bufferSize: 10,
+        bufferSize: 30,
         color: '#fff',
         placeholderColor: '#909399',
         fontSize: 14,
@@ -1976,18 +1995,18 @@ class VirtualTree {
             /** 渲染项 */
             const generateItem = (item) => {
                 const { type, showSelect } = config.rowSelection;
-                const el = document.createElement('div');
+                let el = document.createElement('div');
                 el.classList.add('hy-tree-node');
                 if (config.itemGap) {
                     el.style.paddingBottom = `${config.itemGap}px`;
                 }
-                const nodeContainer = document.createElement('div');
+                let nodeContainer = document.createElement('div');
                 nodeContainer.style.height = `${config.itemHeight}px`;
                 if (config.nodeBgColor) {
                     nodeContainer.style.backgroundColor = config.nodeBgColor;
                 }
                 setNodeClass(nodeContainer, item);
-                const content = document.createElement('div');
+                let content = document.createElement('div');
                 content.classList.add('hy-tree-node-content');
                 content.style.setProperty('padding-left', `${(item.level - 1) * (config.indent || 0)}px`);
                 // 设备离线 - 字体颜色
@@ -2132,6 +2151,10 @@ class VirtualTree {
                     }
                 });
                 el.appendChild(nodeContainer);
+                this._destroyDomSet.add(() => {
+                    // @ts-ignore
+                    el = nodeContainer = content = null;
+                });
                 return el;
             };
             return { renderItem: generateItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hy-virtual-tree",
-  "version": "1.1.23",
+  "version": "1.1.25",
   "type": "module",
   "scripts": {
     "dev": "vite",