The table component in Element gives the maximum height max-height (el-table) the scroll bar on the right to occupy the space

error display

The element's table component has a max-height参数maximum height that can be set for the table component.

If there is too much data to display within the maximum height, a scroll bar will be automatically added for scrolling display.

If there is little data and the max height is not reached, then there should be no scrollbars on the right, and everything interferes with the columns.

But when I set it max-height, and my place has not reached the maximum height, there will be a column of blank placeholders on the right side of the table, which is ugly. How to remove this column blank?

Solution

Method 1:
No max-heightparameters are set.

If your data is limited (paged display), if you don't consider too many columns, the height will be infinitely lowered. Then this method can be used to solve it.

Method 2:

Pass css来隐藏掉this column manually.

code:

 .t_btn2 ::v-deep .el-table th.gutter {
    
    
    display: none;
    width: 0
  }

  .t_btn2 ::v-deep .el-table colgroup col[name='gutter'] {
    
    
    display: none;
    width: 0;
  }

  .t_btn2 ::v-deep .el-table__body {
    
    
    width: 100% !important;
  }

After this modification, if the maximum height is exceeded, a scroll bar will appear. If the maximum height is not exceeded, there will be no empty placeholder columns.

after modification