[Bug Report] Asynchronous loading of data while fixing table headers results in temporary hiding of headers. gutter

[Forx-Js]

Element UI version

2.11.1

OS/Browsers version

all

Vue version

2.6.6

Reproduction Link

https://codepen.io/forx-js/pen/abodxyY

Steps to reproduce

表格固定高度,
异步加载数据,使表格出现滚动条,
会导致头部中的.gutter宽度为0,并display:none;
重新调整尺寸触发浏览器回流后会恢复正常

What is Expected?

头部中的.gutter再出现滚动条时应该display:table-cell;并且宽度值为17px

What is actually happening?

异步加载数据,同时使表格出现滚动条,
会导致表头中的.gutter宽度为0,并display:none;
此问题会导致在IE中,因为缺少.gutter宽度,导致列与头部与下方列无法对齐
在谷歌中会出现滚动条上方出现空白
重新调整尺寸触发浏览器回流后恢复正常

[element-bot]

Translation of this issue:

Element UI version

2.11.1

OS/Browsers version

All

Vue version

2.6.6

Reproduction Link

Https://codepen.io/forx-js/pen/abodxyY

Steps to reproduce

The table is fixed in height.

Asynchronous loading of data causes a scroll bar to appear in the table.
This results in A. gutter width of 0 in the head and display: none;

Resizing triggers browser reflux and returns to normal

What is Expected?

The. gutter scrollbar in the header should display: table-cell when it appears again; and the width value is 17px

What is actually happening?

Loading data asynchronously while scrolling the table.
This results in A. gutter width of 0 in the header and display: none;

This problem can lead to the lack of. gutter width in IE, resulting in column alignment with header and lower column.
There will be a blank space above the scroll bar in Google.

Resizing triggers browser reflux to return to normal

[ziyoung]

#17060 (comment)

[ziyoung]

Duplicate of #17060