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

相关推荐
深耕AI7 分钟前
【wordpress系列教程】05 文章分类与标签
前端
michael_ouyang24 分钟前
WebSocket 鉴权方案选型与 Electron 应用的最佳实践
前端·websocket·网络协议·electron
xixixin_31 分钟前
【vue】中字符串与数组转换:为何首选 Computed 而非 Methods?
前端·javascript·vue.js
Sylvia33.36 分钟前
网球/羽毛球数据API:专业赛事数据服务的技术实现
java·前端·websocket·json
i_am_a_div_日积月累_36 分钟前
el-drawer注册全局点击事件无效;el-dialog注册全局点击事件无效
javascript·vue.js·elementui
啥都不懂的小小白1 小时前
Vue第四篇:组件通信 + DOM 更新 + 过渡动画
vue.js·全局事件通信
向下的大树1 小时前
VUE父子组件传参中的触发时机问题:异步场景下的解决方案
前端·javascript·vue.js
英俊潇洒美少年1 小时前
vue2中使用节流防抖函数时,使用的vue状态始终是初始化的数据
前端·javascript·vue.js
棒棒的唐1 小时前
适合小程序使用的将对象数组转换为参数字符串方法
前端·javascript·小程序
刘一说1 小时前
Vue3响应式原理重构:从Object.defineProperty到Proxy的革命性升级
javascript·vue.js·重构