element [bug report] when using El table, set the index and formatter properties of table column, and the bound method will be called many times

lc8prwob  于 2个月前  发布在  其他
关注(0)|答案(3)|浏览(31)

Element UI version

2.15.1

OS/Browsers version

mac os 10.15.7 / chrome 87.0.4280.88

Vue version

2.6.11

https://codepen.io/sixting/pen/Jjbpbwo?editors=1111

Steps to reproduce

el-table 设置其 height 属性为 100%, 最外层容器的高度设置为 100px, 当展示的内容超出该设定区域的高度时(出现滚动条),Table-column 的 index 和 formatter 属性所绑定的方法就会触发多次。

如果展示区域内容不超过最外层容器高度(不出现滚动条,最外层容器的高度设置为 1000px),则 Table-column 的 index 和 formatter 属性所绑定的方法就会只触发一次(正常的)

What is Expected?

Table-column 的 index 和 formatter 属性所绑定的方法,在渲染的时候,只触发一次,在上述的例子中,期望的行为就是,打印四次结果

What is actually happening?

出现滚动条,Table-column 的 index 和 formatter 属性所绑定的方法,在渲染的时候,触发多次,在上述的例子中,实际的行为就是,打印八次结果

sg24os4d

sg24os4d1#

Translation of this issue:

Element UI version

2.15.1

OS/Browsers version

mac os 10.15.7 / chrome 87.0.4280.88

Vue version

2.6.11

https://codepen.io/sixting/pen/Jjbpbwo?editors=1111

Steps to reproduce

The height attribute of El table is set to 100%, and the height of the outermost container is set to 100px. When the displayed content exceeds the height of the set area (scroll bar appears), the method bound by the index and formatter attributes of table column will trigger many times.

If the content of the display area does not exceed the height of the outermost container (no scroll bar appears, and the height of the outermost container is set to 1000px), the method bound to the index and formatter properties of the table column will only be triggered once (normal)

What is Expected?

The method bound by the index and formatter properties of table column is only triggered once during rendering. In the above example, the expected behavior is to print the result four times

What is actually happening?

When the scroll bar appears, the method bound by the index and formatter properties of the table column is triggered several times during rendering. In the above example, the actual behavior is to print the result eight times

ruyhziif

ruyhziif2#

@ @ @GOGOGOSIR 我也遇到了类似的问题,有可能是Table-column宽度太窄导致的,我把列的width值设置大了一些,就可以了,你试试看

kqlmhetl

kqlmhetl3#

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

相关问题