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

当使用 wordWrapautoHeight 可能计算不正确 #391

Open
SevenOutman opened this issue Dec 2, 2022 · 1 comment
Open

当使用 wordWrapautoHeight 可能计算不正确 #391

SevenOutman opened this issue Dec 2, 2022 · 1 comment
Labels

Comments

@SevenOutman
Copy link
Member

Versions

package version
react 4.10.1
rsuite-table 3.15.1

What is the expected behavior?

开启了 wordWrapautoHeight 时,Table 能根据 data 正确地计算高度。

What is the current behavior?

在开启 wordWrapautoHeight 的情况下,改变 data 的值,如果新旧 data 中会引起折行的条目数量不同,则更新 data 后 Table 的高度计算不正确,仍保持为旧的 data 所渲染的高度。

What are the steps to reproduce?

在下面的例子中,初始 data 中包含 1 条引起折行的条目,点击下方按钮来更新 Table 组件的 data(其中包括 2 条会引起折行的条目),Table 的高度仍保持为 1 条折行的高度。

https://codesandbox.io/s/rsuite-table-flaky-authheight-c1f1wy

Any additional comments? (optional)

经过断点调试,发现问题存在于componentDidUpdate 中重新计算高度的逻辑中。在计算高度时,会查询渲染的 DOM 高度累加得到总高度,但实际上在 componentDidUpdate 时,DOM 尚未根据最新的 data 完成重绘(这是 React 的预期行为),因此获得的 DOM 高度仍然是根据上一次 data 渲染而来的 DOM 高度。

@SevenOutman SevenOutman added the v3 label Dec 2, 2022
@simonguo
Copy link
Member

simonguo commented Dec 5, 2022

wordWrap 这个属性从实现出来后我就不满意,它需要等待表格第一次渲染完以后,在逐个查找DOM 每一行最高单元的高度作为行的高度,当每行的高度都从 DOM 获取到以后,再重新渲染表格,性能很差,而且在很多场景想都不能同时使用。关于自动换行,后面我们再看看有什么方案可以更好,或者参考 Excel 的交互,在单元格上操作时候选择内容自动换行,只影响当前行。

当前,我更推荐使用 fullText,到达业务上相似的需求,但不会让表格多次渲染。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants