2.12.0
macOs 10.15 / Google Chrome 77.0.3865.120(正式版本) (64 位)
2.6.10
https://codepen.io/dantingx/pen/xxxZObj
el-table__body-wrapper高度应该是去除el-table__header-wrapper之后,表格区域的全部高度。滚动条在底部
el-table__body-wrapper比期望的小,滚动条在中部。导致页面显示异常,严重影响客户体验
Translation of this issue:
2.12.0
MacOs 10.15/Google Chrome 77.0.3865.120 (official version) (64 bits)
2.6.10
Https://codepen.io/dantingx/pen/xxxZObj
Define div and set width and height (in production environment, percentage setting)
In div, add the el-table tag and use 100% width and height in style.
The height of el-table__body-wrapper should be the total height of the table area after the removal of el-table__header-wrapper. The scroll bar is at the bottom
El-table__body-wrapper is smaller than expected, and the scroll bar is in the middle. Causing abnormal page display, seriously affecting customer experience
这个bug貌似没有回复啊
我也有类似的问题,我是把el-table写在dialog里了,第一次打开dialog时,el-table__body-wrapper的高度是正确的,之后再次打开,el-table__body-wrapper的高度就会小了一点。导致我el-table__body-wrapper与el-pagination之间有空白区域
我加了doLayout() 之后可以正常工作了
我加了doLayout() 之后可以正常工作了
这个方法有时候能解决这个问题,但是如果column动态加载,还是会出现这个问题。
我看了一下源码,它会在列加载之后计算标题行的高度(这个时候,标题行的高度会很高),同时,table内容区域高度为 总高度-标题行高度,然后,会重新调整一下标题行的高度达到正常效果,但是没有再次计算内容区域的高度。
我加了doLayout() 之后可以正常工作了
这个方法有时候能解决这个问题,但是如果column动态加载,还是会出现这个问题。
我看了一下源码,它会在列加载之后计算标题行的高度(这个时候,标题行的高度会很高),同时,table内容区域高度为 总高度-标题行高度,然后,会重新调整一下标题行的高度达到正常效果,但是没有再次计算内容区域的高度。
是这个问题
怎么解决这个问题? dolayout 计算有问题
it cost me half one day, i saw the element source, in packages/table/src/table-layout.js
it has a updateElsHeight method:
updateElsHeight() {
if (!this.table.$ready) return Vue.nextTick(() => this.updateElsHeight());
const { headerWrapper, appendWrapper, footerWrapper } = this.table.$refs;
this.appendHeight = appendWrapper ? appendWrapper.offsetHeight : 0;
if (this.showHeader && !headerWrapper) return;
// fix issue (https://github.com/ElemeFE/element/pull/16956)
const headerTrElm = headerWrapper.querySelector('.el-table__header tr');
const noneHeader = this.headerDisplayNone(headerTrElm);
**const headerHeight = this.headerHeight = !this.showHeader ? 0 : headerWrapper.offsetHeight;**
if (this.showHeader && !noneHeader && headerWrapper.offsetWidth > 0 && (this.table.columns || []).length > 0 && headerHeight < 2) {
return Vue.nextTick(() => this.updateElsHeight());
}
the headerHeight calculate error, it cause the table untidy.
I hope next version element-ui official can fix the problem.
I have a answer, fixed the header_wrapper table header height, use css style, the header height won't change;
.el-table__header-wrapper {
height 45px;
}
a another method, watch the data who cause the height change, and reset the header height, for example, in avue:
mounted () {
this.$watch(
() => {
return this.$refs.crud.$refs.dialogColumn.columnIndex;
},
(val) => {
if (this.$refs.crud.doLayout) {
this.$refs.crud.$refs.table.$refs.headerWrapper.style.height = '45px';
this.$refs.crud.$refs.table.doLayout();
}
}
)
}
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.
Most helpful comment
这个方法有时候能解决这个问题,但是如果column动态加载,还是会出现这个问题。
我看了一下源码,它会在列加载之后计算标题行的高度(这个时候,标题行的高度会很高),同时,table内容区域高度为 总高度-标题行高度,然后,会重新调整一下标题行的高度达到正常效果,但是没有再次计算内容区域的高度。