fix: table error when use template #1914

components/table/Table.jsx

@@ -490,13 +490,15 @@ export default {
         return getPopupContainer;
       }
       // Use undefined to let rc component use default logic.
-      return scroll && table ? () => table.tableNode : undefined;
+      return scroll && table ? () => table.getTableNode() : undefined;
     },
     scrollToFirstRow() {
       const { scroll } = this.$props;
       if (scroll && scroll.scrollToFirstRowOnChange !== false) {
         scrollTo(0, {
-          getContainer: () => this.$refs.vcTable.bodyTable,
+          getContainer: () => {
+            return this.$refs.vcTable.getBodyTable();
+          },
         });
       }
     },

components/vc-table/index.js

@@ -20,6 +20,12 @@ const Table = {
   ColumnGroup,
   props: T.props,
   methods: {
+    getTableNode() {
+      return this.$refs.table.tableNode;
+    },
+    getBodyTable() {
+      return this.$refs.table.ref_bodyTable;
+    },
     normalize(elements = []) {
       const columns = [];
       elements.forEach(element => {
@@ -63,6 +69,7 @@ const Table = {
         columns,
       },
       on: getListeners(this),
+      ref: 'table',
     };
     return <T {...tProps} />;
   },

components/vc-table/src/TableHeaderRow.jsx

@@ -51,8 +51,10 @@ const TableHeaderRow = {
           }
 
           headerCellProps.class = classNames(
-            customProps.class || customProps.className,
+            customProps.class,
-            column.class || column.className,
+            customProps.className,
+            column.class,
+            column.className,
             {
               [`${prefixCls}-align-${column.align}`]: !!column.align,
               [`${prefixCls}-row-cell-ellipsis`]: !!column.ellipsis,