Element: 2.9.1 table components set height to 100% cause some problem

Created on 31 May 2019  ·  11Comments  ·  Source: ElemeFE/element

Element UI version

2.9.1

OS/Browsers version

mac/chrome

Vue version

2.6.10

Reproduction Link

https://codepen.io/ykl/pen/eaQWpR

Steps to reproduce

set height to 100% in component el-table
open any browser to see the height become 100px
surprise~

What is Expected?

the actual height become 100%

What is actually happening?

the actual height become 100px

Most helpful comment

give the el-table parent node a height, then give the el-table a samller height then set the el-table min-height 100%;
like this min-height100%

All 11 comments

it also cause. if set table height to calc(100vh - 260px)

same problem now
I solve it with

<el-table style="height: calc(100vh - 225px); overflow: auto;">

same problem now
waiting

想设置响应式table高度 超过出现滚动条...现在全得修改 郁闷呀

之前项目的height:100%全失效了
image

using 2.9.0 everything is ok there

give the el-table parent node a height, then give the el-table a samller height then set the el-table min-height 100%;
like this min-height100%

using 2.9.0 everything is ok there

Downgraded from 2.9.1 to 2.9.0 and it's OK now.

提了一个 pr #16013 大家可以帮忙 review

Version

"element-ui": "^2.13.1",
"vue": "^2.5.16"

Solution

height="100%" works for me

<el-table
    :data="tableData"
    height="100%"
    border
    style="width: 100%">

give the el-table parent node a height, then give the el-table a samller height then set the el-table min-height 100%;
like this min-height100%

这个方法有用!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

makunsusu picture makunsusu  ·  3Comments

zhguokai picture zhguokai  ·  3Comments

FranzSkuffka picture FranzSkuffka  ·  3Comments

fscardua picture fscardua  ·  3Comments

yubo111 picture yubo111  ·  3Comments