From 048482bcb20adef0471f8c7ec0cf2d709936ebca Mon Sep 17 00:00:00 2001
From: zeyong tsai <tsai.zeyong@icloud.com>
Date: Sun, 13 Oct 2024 13:11:45 +0800
Subject: [PATCH] perf(components): [table] body render performance optimize
 (#18535)

refactor(components): [table] body render performanceoptimize

Co-authored-by: zeyong.cai <zeyong.cai@xquant.com>
---
 .../table/src/table-body/render-helper.ts     |  8 +++++---
 .../table/src/table-body/td-wrapper.vue       | 20 +++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 packages/components/table/src/table-body/td-wrapper.vue

diff --git a/packages/components/table/src/table-body/render-helper.ts b/packages/components/table/src/table-body/render-helper.ts
index 2a5df23d00..bff2c5be6e 100644
--- a/packages/components/table/src/table-body/render-helper.ts
+++ b/packages/components/table/src/table-body/render-helper.ts
@@ -6,6 +6,7 @@ import { getRowIdentity } from '../util'
 import { TABLE_INJECTION_KEY } from '../tokens'
 import useEvents from './events-helper'
 import useStyles from './styles-helper'
+import TdWrapper from './td-wrapper.vue'
 import type { TableBodyProps } from './defaults'
 import type { RenderRowData, TableProps, TreeNode } from '../table/defaults'
 
@@ -112,7 +113,6 @@ function useRender<T>(props: Partial<TableBodyProps<T>>) {
         }
         const baseKey = `${getKeyOfRow(row, $index)},${cellIndex}`
         const patchKey = columnData.columnKey || columnData.rawColumnKey || ''
-        const tdChildren = cellChildren(cellIndex, column, data)
         const mergedTooltipOptions =
           column.showOverflowTooltip &&
           merge(
@@ -123,7 +123,7 @@ function useRender<T>(props: Partial<TableBodyProps<T>>) {
             column.showOverflowTooltip
           )
         return h(
-          'td',
+          TdWrapper,
           {
             style: getCellStyle($index, cellIndex, row, column),
             class: getCellClass($index, cellIndex, row, column, colspan - 1),
@@ -134,7 +134,9 @@ function useRender<T>(props: Partial<TableBodyProps<T>>) {
               handleCellMouseEnter($event, row, mergedTooltipOptions),
             onMouseleave: handleCellMouseLeave,
           },
-          [tdChildren]
+          {
+            default: () => cellChildren(cellIndex, column, data),
+          }
         )
       })
     )
diff --git a/packages/components/table/src/table-body/td-wrapper.vue b/packages/components/table/src/table-body/td-wrapper.vue
new file mode 100644
index 0000000000..62ba0a40c8
--- /dev/null
+++ b/packages/components/table/src/table-body/td-wrapper.vue
@@ -0,0 +1,20 @@
+<template>
+  <td :colspan="colspan" :rowspan="rowspan"><slot /></td>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'TableTdWrapper',
+})
+
+defineProps({
+  colspan: {
+    type: Number,
+    default: 1,
+  },
+  rowspan: {
+    type: Number,
+    default: 1,
+  },
+})
+</script>