1- import { Typography } from 'antd' ;
2- import { createStyles } from 'antd-style' ;
31import dayjs from 'dayjs' ;
42import { get , isDate } from 'lodash-es' ;
53import React , { useMemo } from 'react' ;
64
7- import TooltipContent from './TooltipContent' ;
5+ // import TooltipContent from './TooltipContent';
86
9- const { Text } = Typography ;
7+ // const { Text } = Typography;
108
11- const useStyles = createStyles ( ( { token, css } ) => ( {
12- cell : css `
13- font-family : ${ token . fontFamilyCode } ;
14- font-size : ${ token . fontSizeSM } px;
15- ` ,
16- tooltip : css `
17- border : 1px solid ${ token . colorBorder } ;
18-
19- font-family : ${ token . fontFamilyCode } ;
20- font-size : ${ token . fontSizeSM } px;
21- color : ${ token . colorText } !important ;
22- word-break : break-all;
23-
24- background : ${ token . colorBgElevated } !important ;
25- ` ,
26- } ) ) ;
9+ // const useStyles = createStyles(({ token, css }) => ({
10+ // cell: css`
11+ // font-family: ${token.fontFamilyCode};
12+ // font-size: ${token.fontSizeSM}px;
13+ // `,
14+ // tooltip: css`
15+ // border: 1px solid ${token.colorBorder};
16+ //
17+ // font-family: ${token.fontFamilyCode};
18+ // font-size: ${token.fontSizeSM}px;
19+ // color: ${token.colorText} !important;
20+ // word-break: break-all;
21+ //
22+ // background: ${token.colorBgElevated} !important;
23+ // `,
24+ // }));
2725
2826interface TableCellProps {
2927 column : string ;
@@ -32,7 +30,7 @@ interface TableCellProps {
3230}
3331
3432const TableCell = ( { dataItem, column, rowIndex } : TableCellProps ) => {
35- const { styles } = useStyles ( ) ;
33+ // const { styles } = useStyles();
3634 const data = get ( dataItem , column ) ;
3735 const content = useMemo ( ( ) => {
3836 if ( isDate ( data ) ) return dayjs ( data ) . format ( 'YYYY-MM-DD HH:mm:ss' ) ;
@@ -54,18 +52,21 @@ const TableCell = ({ dataItem, column, rowIndex }: TableCellProps) => {
5452
5553 return (
5654 < td key = { column } onDoubleClick = { ( ) => console . log ( 'Edit cell:' , rowIndex , column ) } >
57- < Text
58- className = { styles . cell }
59- ellipsis = { {
60- tooltip : {
61- arrow : false ,
62- classNames : { body : styles . tooltip } ,
63- title : < TooltipContent > { content } </ TooltipContent > ,
64- } ,
65- } }
66- >
67- { content }
68- </ Text >
55+ { content }
56+
57+ { /* 不能使用 antd 的 Text, 会有大量的重渲染导致滚动极其卡顿 */ }
58+ { /*<Text*/ }
59+ { /* className={styles.cell}*/ }
60+ { /* ellipsis={{*/ }
61+ { /* tooltip: {*/ }
62+ { /* arrow: false,*/ }
63+ { /* classNames: { body: styles.tooltip },*/ }
64+ { /* title: <TooltipContent>{content}</TooltipContent>,*/ }
65+ { /* },*/ }
66+ { /* }}*/ }
67+ { /*>*/ }
68+ { /* {content}*/ }
69+ { /*</Text>*/ }
6970 </ td >
7071 ) ;
7172} ;
0 commit comments