perf(components): [table] body render performance optimize (#18535)

refactor(components): [table] body render performanceoptimize

Co-authored-by: zeyong.cai <zeyong.cai@xquant.com>

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),
+          }
         )
       })
     )

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>