Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Table]table组件scrollToRow功能滚动位置不准确 #4484

Closed
deepdeepstudy opened this issue Oct 23, 2023 · 10 comments · Fixed by #4635
Closed

[Table]table组件scrollToRow功能滚动位置不准确 #4484

deepdeepstudy opened this issue Oct 23, 2023 · 10 comments · Fixed by #4635
Assignees
Labels
Next release issues to close in next release

Comments

@deepdeepstudy
Copy link

Component

Table

Reproduction link

[import { Table,Button } from '@alifd/next'; 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 render = (value, index, record) => { return Remove({record.id}); }; class App extends React.Component { state = { scrollToRow: 0 } onBodyScroll = (start) => { this.setState({ scrollToRow: start }); }; onClick100 = ()=>{ this.setState({ scrollToRow: 100 });}; onClick150 = ()=>{ this.setState({ scrollToRow: 150 }); }; render() { return (

<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} lock/>
滚动到100行 滚动到150行
); } } ReactDOM.render(, mountNode);](import { Table,Button } from '@alifd/next'; 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 render = (value, index, record) => { return Remove({record.id}); }; class App extends React.Component { state = { scrollToRow: 0 } onBodyScroll = (start) => { this.setState({ scrollToRow: start }); }; onClick100 = ()=>{ this.setState({ scrollToRow: 100 });}; onClick150 = ()=>{ this.setState({ scrollToRow: 150 }); }; render() { return (
<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} lock/>
滚动到100行 滚动到150行
); } } ReactDOM.render(, mountNode);)

Steps to reproduce

重现代码在Riddle中可以直接使用,
T点击按钮,able组件滚动到某100行之后,再往下拉到180行左右,再点击按钮滚到100行,位置不正确了,会偏移,甚至在页面上看不到滚动到的位置。

@github-actions
Copy link

这是您为 Fusion/Next 提的第一个 issue,感谢您对 Fusion 的信任和支持,我们会尽快进行处理。

@deepdeepstudy
Copy link
Author

deepdeepstudy commented Oct 23, 2023 via email

@YSMJ1994
Copy link
Contributor

@deepdeepstudy 你的重现代码复制出来不可用,可以直接给个riddle链接吗

@deepdeepstudy
Copy link
Author

able组件滚动到某100行之后,再往下拉到180行左右,再点击按钮滚到100行,位置不正确了,会偏移,甚至在页面上看不到滚动到的位置。

@deepdeepstudy 你的重现代码复制出来不可用,可以直接给个riddle链接吗

riddle链接: #4484 (comment)

代码
import { Table, Button} from '@alifd/next';
//测试方式,点击按钮跳转到100行,表格自动滚动到100行之后;再手动往下拉到180行左右(或者随意上下滑动到某一行),再点击按钮滚到100行,位置不正确了,会偏移。
//重复几次上面的操作,再点击按钮滚到100行甚至偏移到根本看不到100行的数据了。

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 render = (value, index, record) => {
return Remove({record.id});
};

class App extends React.Component {
state = {
scrollToRow: 20
}
onBodyScroll = (start) => {
this.setState({
scrollToRow: start
});
}
onClick100 = ()=>{ this.setState({ scrollToRow: 100 });}

render() {
    return (
      <>
       <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={render} width={200} lock/>
    </Table>
    <Button onClick={this.onClick100}> 跳转到100行</Button>
      </>
   
    );
}

}

ReactDOM.render(, mountNode);

@deepdeepstudy
Copy link
Author

@deepdeepstudy 你的重现代码复制出来不可用,可以直接给个riddle链接吗

刚才链接好像发错了
https://riddle.alibaba-inc.com/riddles/d7d17f8e

@YSMJ1994
Copy link
Contributor

YSMJ1994 commented Nov 3, 2023

@deepdeepstudy 你的重现代码复制出来不可用,可以直接给个riddle链接吗

刚才链接好像发错了 https://riddle.alibaba-inc.com/riddles/d7d17f8e

你这个链接里,好像不能复现你的问题

@deepdeepstudy
Copy link
Author

deepdeepstudy commented Nov 6, 2023

@YSMJ1994
Copy link
Contributor

明白了,是滚动的位置有一些误差,我们排查一下,计划在下个迭代修复

@YSMJ1994 YSMJ1994 added the Next release issues to close in next release label Nov 10, 2023
@deepdeepstudy
Copy link
Author

请问这个什么时候能修复好呀?

@YSMJ1994
Copy link
Contributor

YSMJ1994 commented Dec 1, 2023

请问这个什么时候能修复好呀?

这个问题已经规划在日常迭代的项目中了,近1-2周就会完成修复哈,请保持关注issue状态~

@YunMeng99 YunMeng99 linked a pull request Dec 5, 2023 that will close this issue
YunMeng99 added a commit that referenced this issue Dec 6, 2023
YSMJ1994 pushed a commit that referenced this issue Dec 6, 2023
* fix(Table): scroll position error close #4484

* fix(Table): modify comments close #4484

* fix(Table): test case add number close #4484
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Next release issues to close in next release
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

4 participants