ElemeFE
[Bug Report] For tables with fixed columns, re-rendering when the horizontal scroll bar disappears, will cause the height of the fixed columns to be calculated incorrectly
Element UI version
2.15.6
OS/Browsers version
Chrome
Vue version
2.6.11
Reproduction Link
https://codepen.io/yxw19870806/pen/BawdvYP
Steps to reproduce
- The table has fixed fields
- Adjust the size of the browser window, make the table has a horizontal scroll
- Maximize the window (you need to ensure that the horizontal scroll bar disappears at this time)
In Reproduction Link, in order to increase the display effect and make it easier to distinguish I set the background-color of .el-table__fixed::before, and .el-table::before
If the table does not have a horizontal scroll before re-render, the problem will not be reproduced And it does not only happen when the size of the browser window changes. If the table data has change make the scroll bar disappears（For example, you reduce the number of table columns）, it will have the same effect.
What is Expected?
element-ui will re-render the table, as the scroll bar disappears, the table displays normally
What is actually happening?
The height of the fixed field（class = 'el-table__fixed'）is calculated incorrectly In the real project, part of the content of the last row may be obscured
大家好，你们可以使用 "doLayout".
获取数据后添加这代码 (el-table 必须要有 ref="tableRefs")
this.$nextTick(() => { this.$refs['tableRefs'].doLayout(); })
https://element.eleme.io/#/en-US/component/table#table-methods
大家好，你们可以使用 "doLayout".
获取数据后添加这代码 (el-table 必须要有 ref="tableRefs")
this.$nextTick(() => { this.$refs['tableRefs'].doLayout(); })https://element.eleme.io/#/en-US/component/table#table-methods
Issue persists after this
大家好，你们可以使用 "doLayout".
获取数据后添加这代码 (el-table 必须要有 ref="tableRefs")
this.$nextTick(() => { this.$refs['tableRefs'].doLayout(); })https://element.eleme.io/#/en-US/component/table#table-methods
It works for me. Nice.
