fix table resizable && type error

components/table/Table.tsx

@@ -106,6 +106,7 @@ export interface TableProps<RecordType = DefaultRecordType>
  sorter: SorterResult<RecordType> | SorterResult<RecordType>[],
  extra: TableCurrentDataSource<RecordType>,
  ) => void;
+ onResizeColumn?: (w: number, col: ColumnType) => void;
  rowSelection?: TableRowSelection<RecordType>;
 
  getPopupContainer?: GetPopupContainer;

components/table/style/index.ts

@@ -13,6 +13,7 @@ import genRadiusStyle from './radius';
 import genRtlStyle from './rtl';
 import genSelectionStyle from './selection';
 import genSizeStyle from './size';
+import genResizeStyle from './resize';
 import genSorterStyle from './sorter';
 import genStickyStyle from './sticky';
 import genSummaryStyle from './summary';
@@ -404,6 +405,7 @@ export default genComponentStyleHook('Table', token => {
  genStickyStyle(tableToken),
  genEllipsisStyle(tableToken),
  genSizeStyle(tableToken),
+ genResizeStyle(tableToken),
  genRtlStyle(tableToken),
  ];
 });

components/table/style/resize.ts

@@ -0,0 +1,52 @@
+// 此样式是vue版本独有样式，react版本没有拖拽改变列宽度功能
+import type { CSSObject } from '../../_util/cssinjs';
+import type { GenerateStyle } from '../../theme/internal';
+import type { TableToken } from './index';
+
+const genResizeStyle: GenerateStyle<TableToken, CSSObject> = token => {
+ const { componentCls } = token;
+
+ return {
+ [`${componentCls}-wrapper ${componentCls}-resize-handle`]: {
+ position: 'absolute',
+ top: 0,
+ height: '100% !important',
+ bottom: 0,
+ left: ' auto !important',
+ right: ' -8px',
+ cursor: 'col-resize',
+ touchAction: 'none',
+ userSelect: 'auto',
+ width: '16px',
+ zIndex: 1,
+ [`&-line`]: {
+ display: 'block',
+ width: '1px',
+ marginLeft: '7px',
+ height: '100% !important',
+ backgroundColor: token.colorPrimary,
+ opacity: 0,
+ },
+ [`&:hover &-line`]: {
+ opacity: 1,
+ },
+ },
+ [`${componentCls}-wrapper ${componentCls}-resize-handle.dragging`]: {
+ overflow: 'hidden',
+ [`${componentCls}-resize-handle-line`]: {
+ opacity: 1,
+ },
+ [`&:before`]: {
+ position: 'absolute',
+ top: 0,
+ bottom: 0,
+ content: '" "',
+ width: '200vw',
+ transform: 'translateX(-50%)',
+ opacity: 0,
+ },
+ },
+ };
+};
+
+export default genResizeStyle;