element el-table 设置fixed导致行错乱问题

首先看有问题的样式:

解决:

css 复制代码
// 解决左右 对不齐 的情况
// el-table 左右有列固定时,fixed为left和right时,行未对齐解决办法
// * 产生原因: el-table底部有滚动条,固定列底部没有滚动条
// * 解决办法: 在el-table的表格中设置padding-bottom的内边距跟滚动条等高
/deep/.el-table__fixed,
/deep/.el-table__fixed-left,
/deep/.el-table__fixed-right {
  // 10 是我这里全局定义的滚动条的高度
  height: calc(100% - 10px) !important;
}

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

/deep/.el-table__fixed-body-wrapper .el-table__body {
  /*滚动条高度*/
  // 10 是我这里全局定义的滚动条的高度
  padding-bottom: 10px !important;
}

el-table 左右有列固定时,fixed为left和right时,行未对齐解决办法

  • 产生原因: el-table底部有滚动条,固定列底部没有滚动条
  • 解决办法: 在el-table的表格中设置padding-bottom的内边距跟滚动条等高

参考:
el-table 设置fixed导致行错乱问题

相关推荐
Dilettante2585 分钟前
React Server Components 全链路解析:Next.js 构建产物、导航流程与 Payload 格式
前端·next.js
前端付豪7 分钟前
Nest 项目小实践之注册登陆
前端·node.js·nestjs
用户9121917620617 分钟前
日本股票K线图生成实战:基于API的完整对接方案
前端
牛奶8 分钟前
JS随笔:ES6+特性与模块化实践
前端·javascript
牛奶23 分钟前
JS随笔:基础语法与控制结构
前端·javascript
天蓝色的鱼鱼26 分钟前
Node.js 中间层退潮:从“前端救星”到“成本噩梦”
前端·架构·node.js
货拉拉技术34 分钟前
如何用 AI 做业务级 Code Review
前端·agent·前端工程化
李剑一39 分钟前
前端圈子又出新东西了,大幅提升解析速度。尤雨溪推荐,但我不太推荐
前端
青屿ovo1 小时前
Vue前端页面版本检测解决方案
前端·vue.js
front_1 小时前
React Hook介绍
前端