The vertical scroll bar of Element’s Table component occasionally doesn’t show up

preface

A few days ago, I encountered a bug in the project. The interaction of this page is to call the data of the corresponding tree node by clicking the el-tree on the left, and then render it to the table on the right. However, the table component sometimes has the problem that the vertical scroll bar is not displayed after rendering. This happens when you click on a tree node with no data and then click on a tree node with data. It can roll, but it doesn’t seem to flow very well.

solution

The first thing to look at is how different the styles are on the table, because this is obviously a CSS thing to think about. El-table –scrollable-y class on the outermost element of the table component. This class adds overflow-y: auto to el-table__body-wrapper; Style. There’s no scrollbar because there’s no class.

After knowing the reason, I went to see the source code of the component and found that it was related to scrollY. I looked inside to see if there was a method to updateScrollY, and I found an updateScrollY method. Then setTimeout calls this method after the table data changes to fix the problem.