fix(Table): scroll position error, close #4484 (#4635)

* fix(Table): scroll position error close #4484 * fix(Table): modify comments close #4484 * fix(Table): test case add number close #4484
alibaba-fusion · Dec 6, 2023 · 7ae8eaa · 7ae8eaa
1 parent a81c7c2
commit 7ae8eaa
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 4 deletions.
diff --git a/src/table/virtual.jsx b/src/table/virtual.jsx
@@ -177,9 +177,15 @@ export default function virtual(BaseComponent) {
         }
 
         adjustScrollTop() {
-            if (this.state.hasVirtualData && this.bodyNode) {
-                this.bodyNode.scrollTop =
-                    (this.lastScrollTop % this.state.rowHeight) + this.state.rowHeight * this.state.scrollToRow;
+            const { rowHeight, hasVirtualData, scrollToRow } = this.state;
+            const oldScrollToRow = Math.floor(this.lastScrollTop / rowHeight);
+            if (hasVirtualData && this.bodyNode) {
+                //根据上次lastScrollTop记录的位置计算而来的scrollToRow位置不准 则以最新的scrollToRow为准重新校准位置（可能是由非用户滚动事件导致的props.scrollToRow发生了变化）
+                if (oldScrollToRow !== scrollToRow) {
+                    this.bodyNode.scrollTop = rowHeight * scrollToRow;
+                } else {
+                    this.bodyNode.scrollTop = (this.lastScrollTop % rowHeight) + rowHeight * scrollToRow;
+                }
             }
         }
 

diff --git a/test/table/issue-spec.js b/test/table/issue-spec.js
@@ -9,7 +9,7 @@ import Table from '../../src/table/index';
 import ConfigProvider from '../../src/config-provider';
 import Input from '../../src/input';
 import '../../src/table/style.js';
-
+import Button from '../../src/button/index';
 /* eslint-disable */
 Enzyme.configure({ adapter: new Adapter() });
 const delay = duration => new Promise(resolve => setTimeout(resolve, duration));
@@ -1238,3 +1238,78 @@ describe('Issue', () => {
         assert(input.value === 'aa');
     });
 });
+
+describe('TableScroll', () => {
+    let mountNode;
+
+    beforeEach(() => {
+        mountNode = document.createElement('div');
+        document.body.appendChild(mountNode);
+    });
+
+    afterEach(() => {
+        ReactDOM.unmountComponentAtNode(mountNode);
+        document.body.removeChild(mountNode);
+    });
+
+    it('scroll position error, close #4484', () => {
+        const dataSource = j => {
+            const result = [];
+            for (let i = 0; i < j; i++) {
+                result.push({
+                    title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },
+                    id: `100306660940${i}`,
+                    time: 2000 + i,
+                    index: i,
+                });
+            }
+            return result;
+        };
+        const relockColumn = (value, index, record) => {
+            return <a>Remove({record.id})</a>;
+        };
+        class Demo extends React.Component {
+            constructor(props) {
+                super(props);
+            }
+            state = {
+                scrollToRow: 20,
+            };
+            onBodyScroll = start => {
+                this.setState({
+                    scrollToRow: start,
+                });
+            };
+            onClick100 = () => {
+                this.setState({ scrollToRow: 100 });
+            };
+            render() {
+                return (
+                    <div style={{ width: '90%' }}>
+                        <Table
+                            dataSource={dataSource(200)}
+                            maxBodyHeight={400}
+                            useVirtual
+                            scrollToRow={this.state.scrollToRow}
+                            onBodyScroll={this.onBodyScroll}
+                        >
+                            <Table.Column title="Id1" dataIndex="id" width={100} />
+                            <Table.Column title="Index" dataIndex="index" width={200} />
+                            <Table.Column title="Time" dataIndex="time" width={200} />
+                            <Table.Column title="Time" dataIndex="time" width={200} />
+                            <Table.Column title="Time" dataIndex="time" width={200} lock="right" />
+                            <Table.Column cell={relockColumn} width={200} lock />
+                        </Table>
+                        <Button onClick={this.onClick100}> 跳转到100行</Button>
+                    </div>
+                );
+            }
+        }
+        ReactDOM.render(<Demo />, mountNode);
+        const scrollNode = mountNode.querySelector('.next-table-body');
+        const rowHeight = scrollNode.querySelector('.next-table-cell').clientHeight;
+        scrollNode.scrollTop = 200;
+        ReactTestUtils.Simulate.click(mountNode.querySelector('.next-btn'));
+        assert(rowHeight * 100 === scrollNode.scrollTop);
+    });
+});