【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
}

现在就不遮挡了

相关推荐
冰暮流星38 分钟前
javascript的switch语句介绍
java·前端·javascript
小简GoGo1 小时前
前端常用设计模式快速入门
javascript·设计模式
利刃大大1 小时前
【ES6】变量与常量 && 模板字符串 && 对象 && 解构赋值 && 箭头函数 && 数组 && 扩展运算符 && Promise/Await/Async
开发语言·前端·javascript·es6
天若有情6731 小时前
ES6 模块与 CommonJS 的区别详解
前端·javascript·es6
大猫会长1 小时前
postgreSQL中,RLS的using与with check
开发语言·前端·javascript
摘星编程2 小时前
React Native for OpenHarmony 实战:ProgressBar 进度条详解
javascript·react native·react.js
wusp19942 小时前
nuxt3模块化API架构
前端·javascript·nuxt3
摘星编程2 小时前
React Native for OpenHarmony 实战:SegmentControl 分段控件详解
javascript·react native·react.js
摘星编程2 小时前
React Native for OpenHarmony 实战:ProgressRing 环形进度详解
javascript·react native·react.js
TAEHENGV2 小时前
React Native for OpenHarmony 实战:数学练习实现
javascript·react native·react.js