ViewUIPlus icon indicating copy to clipboard operation
ViewUIPlus copied to clipboard

[Bug Report]Table组件使用fixed right导致表格行错位的bug

Open kgdfj opened this issue 7 months ago • 1 comments

Environment

macos 12.7.1/chrome 136.0.7103.93/vue3

Reproduction link

https://run.iviewui.com/nshY2YIu

Steps to reproduce

特定字符串在特定宽度下,fixed高度不一致导致表格行错位

What is expected?

表格同一行单元格高度一致

What is actually happening?

fixed的单元格高度不一致导致错位


表格宽度2001px,比fixed占位表格宽度(2000px)多出1像素, 第二列显示宽度200.09px,占位宽度是200px, 而特定长度的字符串恰好因为少了0.09px导致换行,占位比显示多了一行文字的高度,导致了表格错位。 这个问题在vue2版本的view-design同样存在

kgdfj avatar May 14 '25 02:05 kgdfj

Hello @kgdfj! I'm here to help you with bugs, answer your questions, and assist you in becoming a contributor. While you wait for a human maintainer, feel free to share any issues or inquiries you have!

The issue you're experiencing with the Table component in ViewUIPlus, where fixed columns cause row misalignment due to inconsistent cell heights, is likely related to the way column widths and heights are calculated and applied. This discrepancy can occur when the displayed width slightly differs from the fixed width, causing text to wrap unexpectedly and alter the cell height.

To address this, you can try the following approaches:

  1. Ensure Consistent Widths: Double-check the width settings for your columns. Make sure that the widths are explicitly defined and consistent across both fixed and non-fixed columns. This can help prevent unexpected text wrapping due to minor width differences.

  2. Adjust CSS for Text Overflow: Use CSS properties like white-space: nowrap; and text-overflow: ellipsis; to prevent text wrapping and ensure that text remains on a single line. This can help maintain consistent cell heights.

  3. Review the handleResize Method: The handleResize method in the Table component is responsible for calculating column widths. Ensure that this method is correctly distributing widths and consider adjusting it to better handle edge cases where minor width differences cause text wrapping.

  4. Check for Scrollbars: The presence of scrollbars can affect the available space for columns. Ensure that the fixedBody method is correctly handling scrollbars and adjusting the layout accordingly.

These steps can help mitigate the issue of row misalignment due to inconsistent cell heights in fixed columns. If the problem persists, further investigation into the specific implementation details of the Table component may be necessary to identify and resolve the underlying cause [1][2].

To continue talking to Dosu, mention @dosu.


Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

dosubot[bot] avatar May 14 '25 02:05 dosubot[bot]