Element UI Table 设置 max-height 后右侧滚动条空白占位处理

问题描述

Element UI 的 table 组件支持 max-height 参数来限制表格的最大高度。当数据过多时，表格会自动添加滚动条。然而，如果数据较少未达到最大高度，表格右侧仍会显示一列空白的占位符，影响视觉效果。

解决方案

方案一：移除 max-height

如果不涉及大量数据无限撑开高度的情况（例如使用分页），可以不设置 max-height 参数来解决此问题。

方案二：CSS 隐藏占位

通过 CSS 样式手动隐藏导致占位的 gutter 列。

.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;
}

应用上述样式后，超过最大高度时会正常显示滚动条，未超过时则无空白占位列。