Element: [Bug Report] ElTable dynamically generates columns, el-table__body-wrapper height calculation error

Created on 12 Oct 2019  ·  9Comments  ·  Source: ElemeFE/element

Element UI version

2.12.0

OS/Browsers version

macOs 10.15 / Google Chrome 77.0.3865.120(正式版本) (64 位)

Vue version

2.6.10

Reproduction Link

https://codepen.io/dantingx/pen/xxxZObj

Steps to reproduce

  1. 定义div,设定好宽度、高度(生产环境中,是使用百分比设定的)
  2. div内,添加el-table标签,style中的宽度、高度使用100%
  3. 列使用循环方式添加。动态生成。

What is Expected?

el-table__body-wrapper高度应该是去除el-table__header-wrapper之后,表格区域的全部高度。滚动条在底部

What is actually happening?

el-table__body-wrapper比期望的小,滚动条在中部。导致页面显示异常,严重影响客户体验

stale

Most helpful comment

我加了doLayout() 之后可以正常工作了

这个方法有时候能解决这个问题,但是如果column动态加载,还是会出现这个问题。
我看了一下源码,它会在列加载之后计算标题行的高度(这个时候,标题行的高度会很高),同时,table内容区域高度为 总高度-标题行高度,然后,会重新调整一下标题行的高度达到正常效果,但是没有再次计算内容区域的高度。

All 9 comments

Translation of this issue:

Element UI version

2.12.0

OS/Browsers version

MacOs 10.15/Google Chrome 77.0.3865.120 (official version) (64 bits)

Vue version

2.6.10

Reproduction link

Https://codepen.io/dantingx/pen/xxxZObj

Steps to reproduce

  1. Define div and set width and height (in production environment, percentage setting)

  2. In div, add the el-table tag and use 100% width and height in style.

  3. Columns are added in a circular fashion. Dynamic generation.

What is Expected?

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

What is actually happening?

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

zhguokai picture zhguokai  ·  3Comments

no5no6 picture no5no6  ·  3Comments

dbskccc picture dbskccc  ·  3Comments

FranzSkuffka picture FranzSkuffka  ·  3Comments

yubo111 picture yubo111  ·  3Comments