fix: table customRow events not work #1881

Author: tangjinzhou

components/vc-table/src/BaseTable.jsx

@@ -145,12 +145,16 @@ const BaseTable = {
 
   render() {
     const { sComponents: components, prefixCls, scroll, data, getBodyWrapper } = this.table;
-    const { expander, tableClassName, hasHead, hasBody, fixed } = this.$props;
+    const { expander, tableClassName, hasHead, hasBody, fixed, isAnyColumnsFixed } = this.$props;
 
     const tableStyle = {};
 
     if (!fixed && scroll.x) {
-      tableStyle.width = scroll.x === true ? 'max-content' : scroll.x;
+      // 当有固定列时，width auto 会导致 body table 的宽度撑不开，从而固定列无法对齐
+      // 详情见：https://github.com/ant-design/ant-design/issues/22160
+      const tableWidthScrollX = isAnyColumnsFixed ? 'max-content' : 'auto';
+      // not set width, then use content fixed width
+      tableStyle.width = scroll.x === true ? tableWidthScrollX : scroll.x;
       tableStyle.width =
         typeof tableStyle.width === 'number' ? `${tableStyle.width}px` : tableStyle.width;
     }

components/vc-table/src/TableRow.jsx

@@ -83,31 +83,36 @@ const TableRow = {
     }
   },
   methods: {
-    onRowClick(event) {
+    onRowClick(event, rowPropFunc = noop) {
       const { record, index } = this;
       this.__emit('rowClick', record, index, event);
+      rowPropFunc(event);
     },
 
-    onRowDoubleClick(event) {
+    onRowDoubleClick(event, rowPropFunc = noop) {
       const { record, index } = this;
       this.__emit('rowDoubleClick', record, index, event);
+      rowPropFunc(event);
     },
 
-    onContextMenu(event) {
+    onContextMenu(event, rowPropFunc = noop) {
       const { record, index } = this;
       this.__emit('rowContextmenu', record, index, event);
+      rowPropFunc(event);
     },
 
-    onMouseEnter(event) {
+    onMouseEnter(event, rowPropFunc = noop) {
       const { record, index, rowKey } = this;
       this.__emit('hover', true, rowKey);
       this.__emit('rowMouseenter', record, index, event);
+      rowPropFunc(event);
     },
 
-    onMouseLeave(event) {
+    onMouseLeave(event, rowPropFunc = noop) {
       const { record, index, rowKey } = this;
       this.__emit('hover', false, rowKey);
       this.__emit('rowMouseleave', record, index, event);
+      rowPropFunc(event);
     },
 
     setExpandedRowHeight() {
@@ -241,15 +246,26 @@ const TableRow = {
       customClassName,
       customClass,
     );
+    const rowPropEvents = rowProps.on || {};
     const bodyRowProps = mergeProps(
       { ...rowProps, style },
       {
         on: {
-          click: this.onRowClick,
-          dblclick: this.onRowDoubleClick,
-          mouseenter: this.onMouseEnter,
-          mouseleave: this.onMouseLeave,
-          contextmenu: this.onContextMenu,
+          click: e => {
+            this.onRowClick(e, rowPropEvents.click);
+          },
+          dblclick: e => {
+            this.onRowDoubleClick(e, rowPropEvents.dblclick);
+          },
+          mouseenter: e => {
+            this.onMouseEnter(e, rowPropEvents.mouseenter);
+          },
+          mouseleave: e => {
+            this.onMouseLeave(e, rowPropEvents.mouseleave);
+          },
+          contextmenu: e => {
+            this.onContextMenu(e, rowPropEvents.contextmenu);
+          },
         },
         class: rowClassName,
       },