【el-table】横向滚动条加粗后,滚动到固定列下被遮挡,已解决

横向滚动条按要求加粗后,遇到的问题:列表的操作列是固定在最右侧的,当滚动条滑动到最右侧的时候,滚动条被遮挡了

我尝试了几种方法都不行,比如找到.el-table__fixed-right .el-table__fixed-footer-wrapper ,修改bottom的值,无效

解决方法:

首先,el-table设置了固定列之后,会有两套不同的列名

如截图所示,普通列body的高度是362px(含横向滚动条12px的高度)

而固定列body的高度是354px

看红色圈起来的部分,固定列的body高度其实超了,所以挡住了滚动条

固定列body的高度等于普通列body的高度 - 横向滚动条的高度

按示例的普通列高度362px - 横向滚动条的高度12px = 350px

所以固定列的body高度改为350px

bash 复制代码
/deep/ .el-table__fixed-body-wrapper{
  height: 350px !important;//el-table__body-wrapper高362  - 横向滚动条12 = 350
}

现在就不遮挡了

相关推荐
森叶14 分钟前
一线法编程理念
javascript
源码宝24 分钟前
基于SpringBoot+Vue+小程序+Android的智慧校园电子班牌系统源码示例
vue.js·spring boot·架构·智慧校园·电子班牌·源码·代码
罗超驿30 分钟前
22.任务清单应用开发实战:从HTML结构到JavaScript交互的完整实现
javascript·html·交互
_xaboy34 分钟前
开源AI表单设计器 FcDesigner v3.5 版本发布!
前端·vue.js·低代码·开源·表单
爱讲故事的35 分钟前
操作系统第三讲:Context Switch —— 用户态如何安全地进入内核态?
前端·javascript·安全
段ヤシ.41 分钟前
【Java框架】知识点汇总Day7:Spring Boot +Vue(持续更新)
vue.js·spring boot·后端·框架
风之舞_yjf1 小时前
Vue基础(33)_web Storage(web存储)
前端·javascript·vue.js
夜空孤狼啸1 小时前
Vue Data UI:这不是图表库,是数据可视化 UI 平台
vue.js·ui·信息可视化
夜雪闻竹1 小时前
sql.js WASM 深度解析
javascript·sql·wasm
书中枫叶1 小时前
生活缴费充值系统
前端·javascript·经验分享·mongodb·node.js