el-table固定列最后一项显示不全（只显示上半部分数据）

原创已于 2023-04-12 11:13:02 修改 · 2.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-04-12 11:10:03 首次发布

文章介绍了在前端开发中遇到的一个问题，即由于高度设置不当，导致表格的固定列被内容覆盖。解决方案是通过修改CSS样式，设置表格固定列的高度为100%，并调整z-index和overflow属性，确保内容能完整滚动显示。

原因：高度不够，导致被覆盖

示例：

解决方法：

// 计算方式，高度，滚动可以保证高度不受限制，页面内容会完全显示
::v-deep .el-table__fixed {
    height: 100% !important;
    z-index: 50;
  }
  ::v-deep .el-table__body-wrapper {
    overflow: scroll !important;
  }
  ::v-deep .el-table__fixed:before {
    width: 0;
    height: 0;
  }