el-table使用fixed后最后一行被遮挡

本文介绍了解决el-table中设置fixed=“right”的最后一列在不同情况下的显示问题,包括调整高度以确保列完全可见的方法。

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

现象

如图,el-table最后一列设置了fixed=“right”,在有滚动条的时候显示正常,没有滚动条的时候,最后一行就会被遮挡掉一半
在这里插入图片描述

解决

F12审查元素发现.el-table__fixed-right的高度不够,所以

.el-table__fixed-right {
    height: 100% !important;
}

改之后新的问题来了,当鼠标在fixed列最下方点滚动条,是没有效果的。
查看发现.el-table__fixed-right的高度由于是100%,所以挡住了滚动条。
那就再去掉一个滚动条的高度好了:

.el-table__fixed-right {
    height: calc(100% - 8px) !important;
}

再回到没有滚动条的情况的时候,就会发现还会有一部分遮挡
在这里插入图片描述
再把这个横线去掉就好了

.el-table__fixed-right {
    height: calc(100% - 8px) !important;
     &:before {
      height: 0;
    }
}
### 关于 el-table 最后一行显示不全的解决方案 当 `el-table` 使用固定列 (`fixed`) 或者其他特定样式时,可能会出现最后一行显示不全的问题。以下是几种常见的解决方法及其适用场景: #### 方法一:调整 `.el-table__body-wrapper` 的溢出属性 如果问题是由于滚动区域的高度计算错误导致的最后一行遮挡,则可以通过修改 CSS 样式来解决问题。具体代码如下: ```css .el-table { /deep/ .el-table__body-wrapper { overflow-x: scroll !important; /* 设置横向滚动条 */ } } ``` 这种方法适用于当表格内容超出容器宽度时,通过强制启用水平滚动条来确保所有内容可见[^3]。 --- #### 方法二:修复固定列高度问题 对于使用了 `fixed` 属性的表格,可能是因为固定列的高度未正确同步到整个表格而导致最后一行显示异常。此时可以尝试以下样式修正: ```css <style lang="less" scoped> /deep/ .el-table { .el-table__fixed, .el-table__fixed-right { height: 100% !important; } } </style> ``` 此方法能够有效处理固定列与主体部分高度不同步的问题[^1]。 --- #### 方法三:调用 `doLayout()` 方法重新布局 在某些情况下,即使设置了正确的样式,仍然可能出现渲染问题。这通常发生在动态更新数据或复杂嵌套结构的情况下。为了确保表格布局正确重绘,可以在 Vue 生命周期钩子中手动触发 `doLayout()` 方法: ```javascript export default { updated() { this.$nextTick(() => { if (this.$refs.table1) { this.$refs.table1.doLayout(); } }); }, }; ``` 这里的 `ref="table1"` 需要在模板中绑定至 `<el-table>` 元素上。该方法特别适合用于解决因异步加载或其他动态变化引起的布局错乱问题[^2]。 --- #### 方法四:结合工具提示组件优化长文本显示 虽然这不是直接针对最后一行显示不全的解决方案,但如果最后一行的内容因为超宽而被截断,也可以考虑利用 `el-tooltip` 来改善用户体验。例如: ```vue <el-table-column label="名称"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" content="完整内容" placement="top"> <span style="display:inline-block;width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"> {{ scope.row.name }} </span> </el-tooltip> </template> </el-table-column> ``` 这种方式不仅解决了视觉上的不足,还提供了额外的信息展示方式[^4]。 --- ### 总结 以上四种方法分别从不同的角度出发,涵盖了大部分可能导致 `el-table` 最后一行显示不全的原因。可以根据实际情况选择合适的方案实施。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值