element [Bug Report] 表格异步数据加载后 合计行高度未被重新计算

0h4hbjxa  于 4个月前  发布在  其他
关注(0)|答案(4)|浏览(80)

Element UI version

2.15.13

OS/Browsers version

win11 / Chrome 114.0.5735.110

Vue version

2.7.14

https://codepen.io/codog-in-github/pen/XWymjZv

Steps to reproduce

无需操作 直接可重现

What is Expected?

合计行位于底部

What is actually happening?

合计行超出容器盒子 调整浏览器大小后才位于底部

8qgya5xd

8qgya5xd1#

去掉 height="100%" 效果会好些

原因就是计算 bodyHeight 时候 减去的 footerHeight值是0,导致表格高度不对了。
footerWrapper.offsetHeight 开始是0,后来是会有值的,但是这时候的 bodyHeight 已经计算完毕了。

参考 packages/table/src/table-layout.js updateElsHeight()

9nvpjoqh

9nvpjoqh2#

去掉 height="100%" 效果会好些

原因就是计算 bodyHeight 时候 减去的 footerHeight值是0,导致表格高度不对了。 footerWrapper.offsetHeight 开始是0,后来是会有值的,但是这时候的 bodyHeight 已经计算完毕了。

参考 packages/table/src/table-layout.js updateElsHeight()

去掉 height="100%" 的话 表格会把父元素撑开、导致表格的header和footer不固定在上下两侧

f0brbegy

f0brbegy3#

同样遇到了这个问题

1l5u6lss

1l5u6lss4#

`
setTimeout(() => {
this.loading = false
this.data = Array(100).fill({
name: '11',
num: 111
})

this.$nextTick(() => {
      this.$refs.refTable.doLayout()
    })
    
  }, 1000);

`
异步数据加载后,通过以上形式手动调用Table组件的doLayout方法重新计算布局即可。

相关问题