From bf14b8f25f9f9ace4e1f0cc73c67d240de345d2c Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Sat, 9 Apr 2022 18:48:03 +0800
Subject: [PATCH] feat(components): [virtual-table] TableHeaderCell (#7075)

- Add TableHeaderCell props definition
- Implement TableHeaderCell
- Extract some common props
- Fix components' name
---
 packages/components/table-v2/src/common.ts        | 12 ++++++++++--
 packages/components/table-v2/src/header-cell.ts   | 12 ++++++++++++
 packages/components/table-v2/src/table-cell.tsx   |  2 +-
 .../components/table-v2/src/table-header-cell.tsx | 15 +++++++++++++++
 packages/components/table-v2/src/table-header.tsx |  2 +-
 packages/components/table-v2/src/table-row.tsx    |  4 +++-
 6 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/table-v2/src/header-cell.ts
 create mode 100644 packages/components/table-v2/src/table-header-cell.tsx

diff --git a/packages/components/table-v2/src/common.ts b/packages/components/table-v2/src/common.ts
index 7199a10e5e..e1395cb079 100644
--- a/packages/components/table-v2/src/common.ts
+++ b/packages/components/table-v2/src/common.ts
@@ -2,9 +2,17 @@ import { definePropType } from '@element-plus/utils'
 
 import type { Column } from './types'
 
-export const expandColumnKey = String
+type AnyColumn = Column<any>
+
+export const classType = String
 
 export const columns = {
-  type: definePropType<Column<any>[]>(Array),
+  type: definePropType<AnyColumn[]>(Array),
   required: true,
 } as const
+
+export const column = {
+  type: definePropType<AnyColumn>(Object),
+}
+
+export const expandColumnKey = String
diff --git a/packages/components/table-v2/src/header-cell.ts b/packages/components/table-v2/src/header-cell.ts
new file mode 100644
index 0000000000..a5ad7186c9
--- /dev/null
+++ b/packages/components/table-v2/src/header-cell.ts
@@ -0,0 +1,12 @@
+import { buildProps } from '@element-plus/utils'
+import { classType, column } from './common'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const tableV2HeaderCell = buildProps({
+  class: classType,
+  columnIndex: Number,
+  column,
+})
+
+export type TableV2HeaderCell = ExtractPropTypes<typeof tableV2HeaderCell>
diff --git a/packages/components/table-v2/src/table-cell.tsx b/packages/components/table-v2/src/table-cell.tsx
index 54827fe757..262a6be0ed 100644
--- a/packages/components/table-v2/src/table-cell.tsx
+++ b/packages/components/table-v2/src/table-cell.tsx
@@ -12,6 +12,6 @@ const TableV2Cell = defineComponent((props: TableV2CellProps, { slots }) => {
   )
 })
 
-TableV2Cell.name = 'TableV2Cell'
+TableV2Cell.name = 'ElTableV2Cell'
 
 export default TableV2Cell
diff --git a/packages/components/table-v2/src/table-header-cell.tsx b/packages/components/table-v2/src/table-header-cell.tsx
new file mode 100644
index 0000000000..7e465e82d3
--- /dev/null
+++ b/packages/components/table-v2/src/table-header-cell.tsx
@@ -0,0 +1,15 @@
+import { defineComponent } from 'vue'
+
+import type { TableV2HeaderCell } from './header-cell'
+
+const HeaderCell = defineComponent((props: TableV2HeaderCell, { slots }) =>
+  slots.default ? (
+    slots.default(props)
+  ) : (
+    <div class={props.class}>{props.column?.title}</div>
+  )
+)
+
+HeaderCell.name = 'ElTableV2HeaderCell'
+
+export default HeaderCell
diff --git a/packages/components/table-v2/src/table-header.tsx b/packages/components/table-v2/src/table-header.tsx
index 99a61b1c83..48ccfabe06 100644
--- a/packages/components/table-v2/src/table-header.tsx
+++ b/packages/components/table-v2/src/table-header.tsx
@@ -5,7 +5,7 @@ import { tableV2HeaderProps } from './header'
 
 import type { CSSProperties } from 'vue'
 
-const COMPONENT_NAME = 'TableV2Header'
+const COMPONENT_NAME = 'ElTableV2Header'
 const TableV2Header = defineComponent({
   name: COMPONENT_NAME,
   props: tableV2HeaderProps,
diff --git a/packages/components/table-v2/src/table-row.tsx b/packages/components/table-v2/src/table-row.tsx
index 76d3c1fd6c..f4818f9cd7 100644
--- a/packages/components/table-v2/src/table-row.tsx
+++ b/packages/components/table-v2/src/table-row.tsx
@@ -124,8 +124,10 @@ const useTableRow = (props: TableV2RowProps) => {
   return { isScrolling, measurable, measured, rowRef, eventHandlers, onExpand }
 }
 
+const COMPONENT_NAME = 'ElTableV2TableRow'
+
 const TableV2Row = defineComponent({
-  name: '',
+  name: COMPONENT_NAME,
   props: tableV2RowProps,
   setup(props, { expose, slots }) {
     const {