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导致行错乱问题

相关推荐
new code Boy29 分钟前
NestJS、Nuxt.js 和 Next.js
前端·后端
进击切图仔1 小时前
执行 shell 脚本 5 种方式对比
前端·chrome
局i1 小时前
React 简单地图组件封装:基于高德地图 API 的实践(附源码)
前端·javascript·react.js
执行部之龙1 小时前
AI对话平台核心技术解析
前端
yuki_uix1 小时前
防抖(Debounce):从用户体验到手写实现
前端·javascript
HelloReader1 小时前
Flutter 进阶 UI搭建 iOS 风格通讯录应用(十一)
前端
wjj不想说话1 小时前
在 Vue 2.6 微前端架构中,我们为什么放弃了 Vuex 管理页面状态?
vue.js
张元清1 小时前
每个 React 开发者都需要的 10 个浏览器 API Hooks
前端·javascript·面试
HelloReader1 小时前
Flutter ListenableBuilder让界面自动响应数据变化(十)
前端
yuki_uix1 小时前
深拷贝:JavaScript 引用类型的完全复制之道
前端·javascript