iview [Bug Report] Table component ellipsis field invalidation (safari browser)

jpfvwuh4  于 2022-11-19  发布在  其他
关注(0)|答案(1)|浏览(190)

Environment

macOS 10.14 / Safari 12.0(14606.1.36.1.9) / vue ^2.5.2 / iview ^3.2.2

https://run.iviewui.com/preview/AQB2WSjF

Steps to reproduce

Copy the url into safari browser, and resize the window, you will get exception when the window is narrow.
在safari浏览器中直接运行重现链接,拖拽调整窗口大小,将窗口变小。即可复现。( https://run.iviewui.com/preview/AQB2WSjF)

What is expected?

The column which had ellipsisi field should display with points replaced overflow part, when the window is narrow.
当窗口较小时,预期设置了ellipsis字段的列可以隐藏过长的部分&以点代替省略的内容。

What is actually happening?

The column which had ellipsisi field displayed with whole conent, without any ellipsis and hidden part.
当窗口较小时,现在的现象是列会根据内容很宽,布局乱掉。

1、实验发现,当对table设置了v-if条件且异步加载时,会出现这样的问题。如果table未设置v-if异步加载,是不会有这样的问题的。但让人疑惑的是,chrome的表现一直是正常的,无论有没有加异步的条件。
2、实际使用中,我们的业务场景是发送请求到服务端取数据,若数据为空,使用一个备用的提示页来代替table显示,只有当数据条数不为0时,才会显示table。所以需要有条件判断,要等到请求返回后才能判断是否要加载table。
3、当然这个问题,可以使用v-show代替v-if来解决。但正如第一点提到的,chrome的表现一直是正常的。所以还是提个issue,辛苦排查一下。

62o28rlo

62o28rlo1#

Translation of this issue:

Environment

MacOS 10.14/Safari 12.0 (14606.1.36.1.9)/vue ^ 2.5.2/iview ^ 3.2.2

https://run.iviewui.com/preview/AQB2WSjF

Steps to reproduce

Copy the URL into Safari browser, and resize the window, you will get exception when the window is narrow.
Run the replay link directly in the safari browser, drag and drop to adjust the window size, and make the window smaller. It can be reproduced. ( https://run.iviewui.com/preview/AQB2WSjF )

What is expected?

The column which had ellipsis field should display with points replaced overflow part, when the window is narrow.
When the window is small, it is anticipated that columns with ellipsis fields set can hide overly long parts - points instead of omitted content.

What is actually happening?

The column which had ellipsis field displayed with whole conent, without any ellipsis and hidden part.

When the window is small, the current phenomenon is that the columns are very wide and the layout is messy.

  1. Experiments show that when the V-IF condition is set on tables and loaded asynchronously, such problems will occur. If the table is not set to V-IF asynchronous loading, there will be no such problem. But it's doubtful that chrome's performance has always been normal, with or without asynchrony.
  2. In actual use, our business scenario is to send requests to the server for data. If the data is empty, we use a spare prompt page instead of table display. Only when the number of data bars is not zero, table will be displayed. So conditional judgment is needed to decide whether to load the table until the request returns.
  3. Of course, we can use v-show instead of V-IF to solve this problem. But as mentioned in the first point, chrome's performance has always been normal. So I'd like to raise a question and check it hard.

相关问题