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 分钟前
前端vue-实现富文本组件
前端·vue.js·富文本
小白小白从不日白17 分钟前
react hooks--useReducer
前端·javascript·react.js
下雪天的夏风29 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系,如何在TS 中使用 JS 不报错
前端·javascript·typescript
青稞儿35 分钟前
面试题高频之token无感刷新(vue3+node.js)
vue.js·node.js
diygwcom41 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
Hello-Mr.Wang1 小时前
vue3中开发引导页的方法
开发语言·前端·javascript
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js
编程零零七5 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
(⊙o⊙)~哦7 小时前
JavaScript substring() 方法
前端
无心使然云中漫步7 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript