fix(Table): ExpandTable can be Virtual, close #2646

alibaba-fusion · Apr 25, 2021 · 09f4bb5 · 09f4bb5
1 parent f93b366
commit 09f4bb5
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 1 deletion.
diff --git a/src/table/base/body.jsx b/src/table/base/body.jsx
@@ -181,7 +181,7 @@ export default class Body extends React.Component {
                     <Row
                         key={`${record[primaryKey] || (record[primaryKey] === 0 ? 0 : rowIndex)}${expanded}`}
                         {...rowProps}
-                        ref={this.getRowRef.bind(this, rowIndex)}
+                        ref={this.getRowRef.bind(this, expanded ? `${rowIndex}_expanded` : rowIndex)}
                         colGroup={colGroup}
                         rtl={rtl}
                         columns={columns}

diff --git a/test/table/issue-spec.js b/test/table/issue-spec.js
@@ -906,4 +906,72 @@ describe('Issue', () => {
             }, 10);
         });
     });
+
+    it('should work with expanded virtual table, fix #2646', done => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        const dataSource = (n) => {
+            const result = [];
+            for (let i = 0; i < n; i++) {
+                result.push({
+                    title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},
+                    id: 100306660940 + i,
+                    time: 2000 + i
+                });
+            }
+            return result;
+        };
+        const render = (value, index, record) => {
+            return <a href="javascript:;">Remove({record.id})</a>;
+        };
+
+        class App extends React.Component {
+            state = {
+                scrollToRow: 20
+            }
+            onBodyScroll = (start) => {
+                this.setState({
+                    scrollToRow: start
+                });
+            }
+            render() {
+                return (
+                <Table
+                    dataSource={dataSource(200)}
+                    maxBodyHeight={400}
+                    useVirtual
+                    scrollToRow={this.state.scrollToRow}
+                    onBodyScroll={this.onBodyScroll}
+                    expandedRowRender={() => (<div>adddd</div>)}
+                >
+                    <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={render} width={200} />
+                </Table>
+                );
+            }
+        }
+
+
+        ReactDOM.render(<App />, container, function() {
+            setTimeout(() => {
+                const trCount = container.querySelectorAll('.next-table .next-table-body table tr.next-table-row').length;
+                assert(trCount > 10);
+                assert(trCount < 100);
+
+                const ctrl = container.querySelectorAll('.next-table .next-table-body table tr.next-table-row .next-table-expanded-ctrl')[0];
+                ctrl.click();
+
+                assert(container.querySelectorAll('.next-table .next-table-body table tr.next-table-expanded-row'));
+
+                ReactDOM.unmountComponentAtNode(container);
+                document.body.removeChild(container);
+                done();
+            }, 10);
+        });
+    });
 });