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

星星散落人间

已于 2023-04-12 11:13:02 修改

阅读量2.5k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

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

本文链接：https://blog.youkuaiyun.com/future_1_/article/details/130101882

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

示例：

解决方法：

// 计算方式，高度，滚动可以保证高度不受限制，页面内容会完全显示
::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;
  }