From 6e3e52bb775ad254ed33f6ea5100d891c65aaf99 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Thu, 9 Sep 2021 16:56:56 +0800
Subject: [PATCH] refactor: table

---
 components/table/Table.tsx                    |  5 +-
 components/table/demo/expand.vue              |  9 ++-
 .../table/demo/fixed-columns-header.vue       |  8 ++-
 components/table/demo/fixed-columns.vue       |  8 ++-
 components/table/demo/head.vue                | 33 +---------
 components/table/demo/nested-table.vue        | 65 ++++++++++---------
 components/table/demo/reset-filter.vue        |  8 +--
 components/table/demo/stripe.vue              |  4 +-
 components/vc-table/Cell/index.tsx            |  8 ++-
 components/vc-table/FixedHolder/index.tsx     |  6 +-
 components/vc-table/Footer/index.tsx          |  1 +
 components/vc-table/Table.tsx                 |  8 ++-
 components/vc-util/Dom/addEventListener.js    |  4 +-
 site/debugger/index.tsx                       |  2 +-
 14 files changed, 84 insertions(+), 85 deletions(-)

diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index c3eade7ed..866a74d9b 100644
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -114,7 +114,10 @@ export const tableProps = () => {
     columns: { type: Array as PropType<ColumnsType>, default: undefined },
     rowKey: { type: [String, Function] as PropType<TableProps['rowKey']>, default: undefined },
     tableLayout: { type: String as PropType<TableProps['tableLayout']>, default: undefined },
-    rowClassName: { type: String as PropType<TableProps['rowClassName']>, default: undefined },
+    rowClassName: {
+      type: [String, Function] as PropType<TableProps['rowClassName']>,
+      default: undefined,
+    },
     title: { type: Function as PropType<TableProps['title']>, default: undefined },
     footer: { type: Function as PropType<TableProps['footer']>, default: undefined },
     id: { type: String as PropType<TableProps['id']>, default: undefined },
diff --git a/components/table/demo/expand.vue b/components/table/demo/expand.vue
index 37bc64475..db820fc39 100644
--- a/components/table/demo/expand.vue
+++ b/components/table/demo/expand.vue
@@ -18,8 +18,11 @@ When there's too much information to show and the table can't display all at onc
 
 <template>
   <a-table :columns="columns" :data-source="data">
-    <template #action>
-      <a>Delete</a>
+    <template #bodyCell="{ column, text }">
+      <template v-if="column.key === 'action'">
+        <a>Delete</a>
+      </template>
+      <template v-else>{{ text }}</template>
     </template>
     <template #expandedRowRender="{ record }">
       <p style="margin: 0">
@@ -34,7 +37,7 @@ const columns = [
   { title: 'Name', dataIndex: 'name', key: 'name' },
   { title: 'Age', dataIndex: 'age', key: 'age' },
   { title: 'Address', dataIndex: 'address', key: 'address' },
-  { title: 'Action', dataIndex: '', key: 'x', slots: { customRender: 'action' } },
+  { title: 'Action', key: 'action' },
 ];
 
 const data = [
diff --git a/components/table/demo/fixed-columns-header.vue b/components/table/demo/fixed-columns-header.vue
index 5c8a312b0..8e7f985fe 100644
--- a/components/table/demo/fixed-columns-header.vue
+++ b/components/table/demo/fixed-columns-header.vue
@@ -25,8 +25,11 @@ A Solution for displaying large amounts of data with long columns.
 
 <template>
   <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }">
-    <template #action>
-      <a>action</a>
+    <template #bodyCell="{ column, text }">
+      <template v-if="column.key === 'operation'">
+        <a>action</a>
+      </template>
+      <template v-else>{{ text }}</template>
     </template>
   </a-table>
 </template>
@@ -49,7 +52,6 @@ const columns = [
     key: 'operation',
     fixed: 'right',
     width: 100,
-    slots: { customRender: 'action' },
   },
 ];
 
diff --git a/components/table/demo/fixed-columns.vue b/components/table/demo/fixed-columns.vue
index 9a527c6fc..3e679a5a0 100644
--- a/components/table/demo/fixed-columns.vue
+++ b/components/table/demo/fixed-columns.vue
@@ -26,8 +26,11 @@ To fix some columns and scroll inside other columns, and you must set `scroll.x`
 
 <template>
   <a-table :columns="columns" :data-source="data" :scroll="{ x: 1300 }">
-    <template #action>
-      <a>action</a>
+    <template #bodyCell="{ column, text }">
+      <template v-if="column.key === 'operation'">
+        <a>action</a>
+      </template>
+      <template v-else>{{ text }}</template>
     </template>
   </a-table>
 </template>
@@ -50,7 +53,6 @@ const columns = [
     key: 'operation',
     fixed: 'right',
     width: 100,
-    slots: { customRender: 'action' },
   },
 ];
 
diff --git a/components/table/demo/head.vue b/components/table/demo/head.vue
index 7b9c88f77..d2af235f2 100644
--- a/components/table/demo/head.vue
+++ b/components/table/demo/head.vue
@@ -28,6 +28,7 @@ If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `
   <a-table :columns="columns" :data-source="data" @change="onChange" />
 </template>
 <script lang="ts">
+import type { TableColumnType, TableProps } from 'ant-design-vue';
 import { defineComponent } from 'vue';
 
 type TableDataType = {
@@ -37,35 +38,7 @@ type TableDataType = {
   address: string;
 };
 
-type PaginationType = {
-  current: number;
-  pageSize: number;
-};
-
-type FilterType = {
-  name: string;
-  address: string;
-};
-
-type ColumnType = {
-  title: string;
-  dataIndex: string;
-  filters?: {
-    text: string;
-    value: string;
-    children?: {
-      text: string;
-      value: string;
-    }[];
-  }[];
-  onFilter?: (value: string, record: TableDataType) => boolean;
-  sorter?: (a: TableDataType, b: TableDataType) => number;
-  sortDirections?: string[];
-  defaultSortOrder?: string;
-  filterMultiple?: string[] | boolean;
-};
-
-const columns: ColumnType[] = [
+const columns: TableColumnType<TableDataType>[] = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -153,7 +126,7 @@ const data: TableDataType[] = [
 ];
 export default defineComponent({
   setup() {
-    const onChange = (pagination: PaginationType, filters: FilterType[], sorter: ColumnType) => {
+    const onChange: TableProps<TableDataType>['onChange'] = (pagination, filters, sorter) => {
       console.log('params', pagination, filters, sorter);
     };
     return {
diff --git a/components/table/demo/nested-table.vue b/components/table/demo/nested-table.vue
index b99325590..5c716de37 100644
--- a/components/table/demo/nested-table.vue
+++ b/components/table/demo/nested-table.vue
@@ -19,34 +19,40 @@ Showing more detailed info of every row.
 
 <template>
   <a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
-    <template #operation>
-      <a>Publish</a>
+    <template #bodyCell="{ column, text }">
+      <template v-if="column.key === 'operation'">
+        <a>Publish</a>
+      </template>
+      <template v-else>{{ text }}</template>
     </template>
     <template #expandedRowRender>
       <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
-        <template #status>
-          <span>
-            <a-badge status="success" />
-            Finished
-          </span>
-        </template>
-        <template #operation>
-          <span class="table-operation">
-            <a>Pause</a>
-            <a>Stop</a>
-            <a-dropdown>
-              <template #overlay>
-                <a-menu>
-                  <a-menu-item>Action 1</a-menu-item>
-                  <a-menu-item>Action 2</a-menu-item>
-                </a-menu>
-              </template>
-              <a>
-                More
-                <down-outlined />
-              </a>
-            </a-dropdown>
-          </span>
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.key === 'state'">
+            <span>
+              <a-badge status="success" />
+              Finished
+            </span>
+          </template>
+          <template v-else-if="column.key === 'operation'">
+            <span class="table-operation">
+              <a>Pause</a>
+              <a>Stop</a>
+              <a-dropdown>
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item>Action 1</a-menu-item>
+                    <a-menu-item>Action 2</a-menu-item>
+                  </a-menu>
+                </template>
+                <a>
+                  More
+                  <down-outlined />
+                </a>
+              </a-dropdown>
+            </span>
+          </template>
+          <template v-else>{{ text }}</template>
         </template>
       </a-table>
     </template>
@@ -63,7 +69,7 @@ const columns = [
   { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
   { title: 'Creator', dataIndex: 'creator', key: 'creator' },
   { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
-  { title: 'Action', key: 'operation', slots: { customRender: 'operation' } },
+  { title: 'Action', key: 'operation' },
 ];
 
 interface DataItem {
@@ -80,7 +86,7 @@ const data: DataItem[] = [];
 for (let i = 0; i < 3; ++i) {
   data.push({
     key: i,
-    name: 'Screem',
+    name: `Screem ${i + 1}`,
     platform: 'iOS',
     version: '10.3.4.5654',
     upgradeNum: 500,
@@ -92,13 +98,12 @@ for (let i = 0; i < 3; ++i) {
 const innerColumns = [
   { title: 'Date', dataIndex: 'date', key: 'date' },
   { title: 'Name', dataIndex: 'name', key: 'name' },
-  { title: 'Status', key: 'state', slots: { customRender: 'status' } },
+  { title: 'Status', key: 'state' },
   { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
   {
     title: 'Action',
     dataIndex: 'operation',
     key: 'operation',
-    slots: { customRender: 'operation' },
   },
 ];
 
@@ -114,7 +119,7 @@ for (let i = 0; i < 3; ++i) {
   innerData.push({
     key: i,
     date: '2014-12-24 23:12:00',
-    name: 'This is production name',
+    name: `This is production name ${i + 1}`,
     upgradeNum: 'Upgraded: 56',
   });
 }
diff --git a/components/table/demo/reset-filter.vue b/components/table/demo/reset-filter.vue
index 1d39730c1..0b57efcf8 100644
--- a/components/table/demo/reset-filter.vue
+++ b/components/table/demo/reset-filter.vue
@@ -35,9 +35,7 @@ Control filters and sorters by `filteredValue` and `sortOrder`.
 </template>
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
-import { TableState, TableStateFilters } from 'ant-design-vue/es/table/interface';
-
-type Pagination = TableState['pagination'];
+import type { TableColumnType, TableProps } from 'ant-design-vue';
 
 interface DataItem {
   key: string;
@@ -78,7 +76,7 @@ export default defineComponent({
     const filteredInfo = ref();
     const sortedInfo = ref();
 
-    const columns = computed(() => {
+    const columns = computed<TableColumnType[]>(() => {
       const filtered = filteredInfo.value || {};
       const sorted = sortedInfo.value || {};
       return [
@@ -120,7 +118,7 @@ export default defineComponent({
       ];
     });
 
-    const handleChange = (pagination: Pagination, filters: TableStateFilters, sorter: any) => {
+    const handleChange: TableProps['onChange'] = (pagination, filters, sorter) => {
       console.log('Various parameters', pagination, filters, sorter);
       filteredInfo.value = filters;
       sortedInfo.value = sorter;
diff --git a/components/table/demo/stripe.vue b/components/table/demo/stripe.vue
index 4bb876a67..ef5e948cb 100644
--- a/components/table/demo/stripe.vue
+++ b/components/table/demo/stripe.vue
@@ -20,14 +20,14 @@ Use `rowClassName` Customize the table with Striped.
     size="middle"
     :columns="columns"
     :data-source="data"
-    :row-class-name="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
   />
   <a-table
     class="ant-table-striped"
     size="middle"
     :columns="columns"
     :data-source="data"
-    :row-class-name="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
     bordered
   />
 </template>
diff --git a/components/vc-table/Cell/index.tsx b/components/vc-table/Cell/index.tsx
index c26c6826b..755152d5e 100644
--- a/components/vc-table/Cell/index.tsx
+++ b/components/vc-table/Cell/index.tsx
@@ -15,6 +15,7 @@ import type {
 } from '../interface';
 import { getPathValue, validateValue } from '../utils/valueUtil';
 import { useInjectSlots } from '../../table/context';
+import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
 
 function isRenderCell<RecordType = DefaultRecordType>(
   data: RenderedCell<RecordType>,
@@ -141,7 +142,12 @@ export default defineComponent<CellProps>({
           }
         }
 
-        if (cellType === 'body' && contextSlots.value.bodyCell && !column.slots?.customRender) {
+        if (
+          !(INTERNAL_COL_DEFINE in column) &&
+          cellType === 'body' &&
+          contextSlots.value.bodyCell &&
+          !column.slots?.customRender
+        ) {
           childNode = flattenChildren(
             contextSlots.value.bodyCell({
               text: value,
diff --git a/components/vc-table/FixedHolder/index.tsx b/components/vc-table/FixedHolder/index.tsx
index 91e78c80e..7227a1381 100644
--- a/components/vc-table/FixedHolder/index.tsx
+++ b/components/vc-table/FixedHolder/index.tsx
@@ -14,6 +14,7 @@ import {
 } from 'vue';
 import { useInjectTable } from '../context/TableContext';
 import classNames from '../../_util/classNames';
+import addEventListenerWrap from 'ant-design-vue/es/vc-util/Dom/addEventListener';
 
 function useColumnWidth(colWidthsRef: Ref<readonly number[]>, columCountRef: Ref<number>) {
   return computed(() => {
@@ -77,13 +78,14 @@ export default defineComponent<FixedHeaderProps<DefaultRecordType>>({
         e.preventDefault();
       }
     }
+    const wheelEvent = ref();
     onMounted(() => {
       nextTick(() => {
-        scrollRef.value?.addEventListener('wheel', onWheel);
+        wheelEvent.value = addEventListenerWrap(scrollRef.value, 'wheel', onWheel);
       });
     });
     onBeforeUnmount(() => {
-      scrollRef.value?.removeEventListener('wheel', onWheel);
+      wheelEvent.value?.remove();
     });
 
     // Check if all flattenColumns has width
diff --git a/components/vc-table/Footer/index.tsx b/components/vc-table/Footer/index.tsx
index 7dfb9c1d6..1af9e018c 100644
--- a/components/vc-table/Footer/index.tsx
+++ b/components/vc-table/Footer/index.tsx
@@ -13,6 +13,7 @@ export interface FooterProps<RecordType = DefaultRecordType> {
 export default defineComponent({
   name: 'Footer',
   props: ['stickyOffsets', 'flattenColumns'],
+  inheritAttrs: false,
   setup(props, { slots }) {
     const tableContext = useInjectTable();
     useProvideSummary(
diff --git a/components/vc-table/Table.tsx b/components/vc-table/Table.tsx
index 16b49e0fb..521104186 100644
--- a/components/vc-table/Table.tsx
+++ b/components/vc-table/Table.tsx
@@ -390,11 +390,15 @@ export default defineComponent<TableProps>({
       if (!target) {
         return;
       }
+
       if (typeof target === 'function') {
         target(scrollLeft);
-      } else if (target.scrollLeft !== scrollLeft) {
+        return;
+      }
+      const domTarget = (target as any).$el || target;
+      if (domTarget.scrollLeft !== scrollLeft) {
         // eslint-disable-next-line no-param-reassign
-        target.scrollLeft = scrollLeft;
+        domTarget.scrollLeft = scrollLeft;
       }
     }
 
diff --git a/components/vc-util/Dom/addEventListener.js b/components/vc-util/Dom/addEventListener.js
index d307e7cbe..243dd0dc7 100644
--- a/components/vc-util/Dom/addEventListener.js
+++ b/components/vc-util/Dom/addEventListener.js
@@ -1,7 +1,7 @@
 import supportsPassive from '../../_util/supportsPassive';
 
 export default function addEventListenerWrap(target, eventType, cb, option) {
-  if (target.addEventListener) {
+  if (target && target.addEventListener) {
     let opt = option;
     if (
       opt === undefined &&
@@ -14,7 +14,7 @@ export default function addEventListenerWrap(target, eventType, cb, option) {
   }
   return {
     remove: () => {
-      if (target.removeEventListener) {
+      if (target && target.removeEventListener) {
         target.removeEventListener(eventType, cb);
       }
     },
diff --git a/site/debugger/index.tsx b/site/debugger/index.tsx
index 00582956a..30aa12cd2 100644
--- a/site/debugger/index.tsx
+++ b/site/debugger/index.tsx
@@ -1,5 +1,5 @@
 // debugger tsx
-import Demo from '../../components/table/demo/expand-children.vue';
+import Demo from '../../components/table/demo/template.vue';
 
 export default {
   render() {