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

相关推荐
excel1 分钟前
webpack 核心编译器 第三节
前端
qq_340474022 分钟前
5.1 WPF路由事件以及文本样式
前端·c#·wpf
拉不动的猪5 分钟前
回顾vue3异步组件加载及其原理
前端·javascript·vue.js
—Qeyser32 分钟前
用Deepseek写扫雷uniapp小游戏
开发语言·前端·javascript
摆烂工程师1 小时前
保姆教程:2025年 ChatGPT Plus 的订阅升级攻略和支付失败的解决方式
前端·后端·程序员
蓝屏的钙1 小时前
H5 如何 C 端唤起导航高德百度 APP
前端·app
冴羽1 小时前
SvelteKit 最新中文文档教程(13)—— Hooks
前端·javascript·svelte
skywalk81631 小时前
自动化浏览器的测试框架playwright 支持多种浏览器Chromium、Firefox 和 WebKit
前端·chrome·自动化·测试·playwright
小宋10211 小时前
Vue实现动态数据透视表(交叉表)
前端·javascript·vue.js·数据透视表·动态交叉表
x-cmd1 小时前
x-cmd install | Wuzz - Web 开发与安全测试利器,交互式 HTTP 工具
前端·网络协议·安全·http·浏览器·测试·命令行