Element-ui 的el-table固定列显示问题

最新推荐文章于 2025-03-27 15:09:32 发布

火恐龙

最新推荐文章于 2025-03-27 15:09:32 发布

阅读量3.3k

点赞数 2

分类专栏： 000-暂未分类文章标签： vue.js html javascript

本文链接：https://blog.youkuaiyun.com/qq_52681418/article/details/120115561

版权

9 篇文章

订阅专栏

使用el-tabe设置固定列，且没有为表格设置固定高后，数据过多时会出现如下情况：
在这里插入图片描述
即左侧固定列、右侧固定列高度均显示不全。

设置固定列后，实际上该列不再属于表格，而是在表格旁边添加了两个div：

在这里插入图片描述
左侧是左边固定列，中间是表格，右边是右边固定列。固定列高度是根据父div百分比计算而来。

当表格数据过多时，中间div高度会被撑大，从而撑大了父div高度。而此时子div1和子div2高度却没有发生变化。
在这里插入图片描述
因此就出现了第一张图里的那种情况。

检查你的纵向滚动条是否是表格内容的滚动条：具体验证方法是固定表头，然后滚动纵向滚动条。

如果滚动时表头不动，那么滚动条是正确的。滚动条正确后，使用正确滚动条滚动，固定列只有下方没有对齐，但可以滚动出来，此时修改对齐方法如下：

/deep/ .el-table__fixed{
  height: 100% !important;
}
/deep/ .el-table__fixed-right,.el-table__fixed-body-wrapper{
  height: 100% !important;
}

如果上面这段代码没有解决你的问题，请检查你的滚动条是否是正确滚动条。
固定列的高度是和表格内容所显示的高度是保持一致的，并且固定列数据是通过滚动来显示的。如果没有使用表格内部的滚动条来进行滚动，那么你滚动时滚动的只是固定列的容器，而非固定列的内容。

也就是说，上面的图中，是通过滚动div2中的滚动条来滚动div1、div3，而不是让div2增大后使用父div滚动条来滚动。

注意：需要为table设置最大高度，可以是calc(100%-20px)这种