重构复选框，大幅提升渲染速度

x-extends · Dec 13, 2024 · d2c0778 · d2c0778
1 parent 86e1281
commit d2c0778
Show file tree

Hide file tree

Showing 4 changed files with 314 additions and 359 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.9.25",
+  "version": "4.9.26-beta.1",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、拖拽排序，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.3.29"
+    "vxe-pc-ui": "^4.3.30"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

diff --git a/packages/table/module/custom/hook.ts b/packages/table/module/custom/hook.ts
@@ -27,30 +27,37 @@ VxeUI.hooks.add('tableCustomModule', {
 
     const openCustom = () => {
       const { initStore, customStore } = reactData
-      const { collectColumn } = internalData
-      const sortMaps: Record<string, number> = {}
-      const fixedMaps: Record<string, VxeColumnPropTypes.Fixed> = {}
-      const visibleMaps: Record<string, boolean> = {}
-      XEUtils.eachTree(collectColumn, column => {
-        const colid = column.getKey()
-        column.renderFixed = column.fixed
-        column.renderVisible = column.visible
-        column.renderResizeWidth = column.renderWidth
-        sortMaps[colid] = column.renderSortNumber
-        fixedMaps[colid] = column.fixed
-        visibleMaps[colid] = column.visible
-      })
-      customStore.oldSortMaps = sortMaps
-      customStore.oldFixedMaps = fixedMaps
-      customStore.oldVisibleMaps = visibleMaps
-      reactData.customColumnList = collectColumn.slice(0)
       customStore.visible = true
       initStore.custom = true
+      handleUpdateCustomColumn()
       checkCustomStatus()
       calcMaxHeight()
       return nextTick().then(() => calcMaxHeight())
     }
 
+    const handleUpdateCustomColumn = () => {
+      const { customStore } = reactData
+      const { collectColumn } = internalData
+      if (customStore.visible) {
+        const sortMaps: Record<string, number> = {}
+        const fixedMaps: Record<string, VxeColumnPropTypes.Fixed> = {}
+        const visibleMaps: Record<string, boolean> = {}
+        XEUtils.eachTree(collectColumn, column => {
+          const colid = column.getKey()
+          column.renderFixed = column.fixed
+          column.renderVisible = column.visible
+          column.renderResizeWidth = column.renderWidth
+          sortMaps[colid] = column.renderSortNumber
+          fixedMaps[colid] = column.fixed
+          visibleMaps[colid] = column.visible
+        })
+        customStore.oldSortMaps = sortMaps
+        customStore.oldFixedMaps = fixedMaps
+        customStore.oldVisibleMaps = visibleMaps
+        reactData.customColumnList = collectColumn.slice(0)
+      }
+    }
+
     const closeCustom = () => {
       const { customStore } = reactData
       const customOpts = computeCustomOpts.value
@@ -252,7 +259,8 @@ VxeUI.hooks.add('tableCustomModule', {
           $xeTable.closeCustom()
           $xeTable.emitCustomEvent('close', evnt)
         }
-      }
+      },
+      handleUpdateCustomColumn
     }
 
     return { ...customMethods, ...customPrivateMethods }

diff --git a/packages/table/module/keyboard/hook.ts b/packages/table/module/keyboard/hook.ts
@@ -146,7 +146,7 @@ hooks.add('tableKeyboardModule', {
             lastRangeRows = rangeRows
             if (evnt.ctrlKey) {
               rangeRows.forEach((row: any) => {
-                $xeTable.handleSelectRow({ row }, selectRecords.indexOf(row) === -1)
+                $xeTable.handleBatchSelectRows([row], selectRecords.indexOf(row) === -1)
               })
             } else {
               $xeTable.setAllCheckboxRow(false)