1
0
Эх сурвалжийг харах

fix: fix Table resize wip

shijia.me 2 жил өмнө
parent
commit
3bab702111

+ 2 - 1
packages/semi-ui/table/_story/table.stories.jsx

@@ -98,7 +98,8 @@ export {
     EllipsisNormalTable, EllipsisFixedTable, ShowTitleTable,
     EllipsisNormalTable, EllipsisFixedTable, ShowTitleTable,
     Fixed1556,
     Fixed1556,
     FixedColumnAlign,
     FixedColumnAlign,
-    FixOnChange
+    FixOnChange,
+    FixedResizablePerformance
 } from './v2';
 } from './v2';
 export { default as FixSelectAll325 } from './Demos/rowSelection';
 export { default as FixSelectAll325 } from './Demos/rowSelection';
 
 

+ 127 - 0
packages/semi-ui/table/_story/v2/FixedResizablePerformance/index.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from 'react';
+import { Table } from '@douyinfe/semi-ui';
+
+const App = () => {
+    const [columns, setColumns] = useState([]);
+    const [data, setData] = useState([]);
+    useEffect(() => {
+        setColumns([
+            {
+                title: '任务ID',
+                width: 200,
+                dataIndex: 'taskId',
+                fixed: true,
+            },
+            {
+                title: '所属项目',
+                dataIndex: 'projectName',
+                width: 200,
+                render: (_: any, record: { projectName: any }) => record.projectName || '-',
+            },
+            {
+                title: '所属任务',
+                dataIndex: 'taskName',
+                width: 200,
+                render: (_: any, record: { taskName: any }) => record.taskName || '-',
+            },
+            {
+                title: '所属任务',
+                dataIndex: 'taskName1',
+                width: 200,
+                render: (_: any, record: { taskName: any }) => record.taskName || '-',
+            },
+            {
+                title: '所属任务',
+                dataIndex: 'taskName3',
+                width: 200,
+                render: (_: any, record: { taskName: any }) => record.taskName || '-',
+            },
+            {
+                title: '所属任务',
+                dataIndex: 'taskName4',
+                width: 200,
+                render: (_: any, record: { taskName: any }) => record.taskName || '-',
+            },
+            {
+                title: '所属任务1',
+                dataIndex: 'taskName5',
+                width: 200,
+                render: (_: any, record: { taskName: any }) => record.taskName || '-',
+            },
+            {
+                title: '所属任务',
+                dataIndex: 'taskName6',
+                width: 200,
+                render: (_: any, record: { taskName: any }) => record.taskName || '-',
+            },
+            {
+                title: '所属任务',
+                dataIndex: 'taskName7',
+                width: 200,
+                render: (_: any, record: { taskName: any }) => record.taskName || '-',
+            },
+            {
+                title: '所属任务',
+                dataIndex: 'taskName8',
+                width: 200,
+                render: (_: any, record: { taskName: any }) => record.taskName || '-',
+            },
+            {
+                title: '操作',
+                dataIndex: 'actions',
+                width: 220,
+                fixed: 'right',
+            },
+        ]);
+        reload();
+    }, []);
+
+    const reload = () => {
+        setTimeout(() => {
+            setData([
+                {
+                    taskId: '233',
+                    projectName: '2333',
+                    taskName: '2323',
+                },
+                {
+                    taskId: '233',
+                    projectName: '2333',
+                    taskName: '2323',
+                },
+                {
+                    taskId: '233',
+
+                    projectName: '2333',
+                    taskName: '2323',
+                },
+                {
+                    taskId: '233',
+
+                    projectName: '2333',
+                    taskName: '2323',
+                },
+            ]);
+        }, 1000);
+    };
+    const onPageChange = () => { };
+    const onPageSizeChange = () => { };
+    return (
+        <Table
+            columns={columns}
+            dataSource={data}
+            resizable
+            scroll={{ x: 1200 }}
+            pagination={{
+                showSizeChanger: true,
+                pageSize: 10,
+                total: 100,
+                currentPage: 1,
+                onChange: onPageChange,
+                onPageSizeChange: onPageSizeChange,
+            }}
+        />
+    );
+};
+
+export default App;

+ 1 - 0
packages/semi-ui/table/_story/v2/index.js

@@ -20,3 +20,4 @@ export { EllipsisNormalTable, EllipsisFixedTable, ShowTitleTable } from './FeatE
 export { default as Fixed1556 } from './Fixed1556';
 export { default as Fixed1556 } from './Fixed1556';
 export { default as FixedColumnAlign } from './FixedColumnAlign';
 export { default as FixedColumnAlign } from './FixedColumnAlign';
 export { default as FixOnChange } from './FixOnChange';
 export { default as FixOnChange } from './FixOnChange';
+export { default as FixedResizablePerformance } from './FixedResizablePerformance';