fix: table resizable not work && type error (#6514)

pull/6518/head
果冻橙 2023-04-27 21:04:29 +08:00 committed by GitHub
parent 43009f0c59
commit 063c06f9c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 0 deletions

View File

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

View File

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

View File

@ -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;