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

相关推荐
是上好佳佳佳呀8 小时前
【前端(十二)】JavaScript 函数与对象笔记
前端·javascript·笔记
你真的快乐吗8 小时前
@fuxishi/svg-icon:一个 Vue 3 svg本地图标+iconify图标组件库,让图标管理不再头疼
前端·vue.js·typescript
Rkgua8 小时前
ESModule和Commonjs模块的区别
前端·javascript
江南十四行8 小时前
ReAct Agent 基本理论与项目实战(二)
前端·react.js·前端框架
用户600071819108 小时前
【翻译】React 如何乱序流式输出 UI,却仍保持最终顺序
前端
江南十四行9 小时前
AI Agent应用类型及Function Calling开发实战(三)
服务器·前端·javascript
GISer_Jing9 小时前
AI原生全栈架构理论体系:从分布式范式演进到全链路工程化理论基石
前端·人工智能·学习·ai编程
GISer_Jing9 小时前
从“切图仔”到“增长架构师”:AI时代营销前端的范式革命
前端·人工智能·ai编程
广州华水科技9 小时前
单北斗GNSS在水库变形监测中的应用与系统安装解析
前端
xingpanvip9 小时前
星盘接口开发文档:组合三限盘接口指南
android·开发语言·前端·python·php·lua