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

相关推荐
Access开发易登软件4 分钟前
在 Access 实现标签输入控件:VBA + HTML 混合开发实战
前端·数据库·信息可视化·html·excel·vba·access
૮・ﻌ・15 分钟前
Nodejs - 02:模块化、npm、yarn、cnpm
前端·npm·node.js·express·yarn·cnpm·包管理工具
大雷神15 分钟前
HarmonyOS APP<玩转React>开源教程十:组件化开发概述
前端·react.js·开源·harmonyos
小小小小宇19 分钟前
React useMemo 深度源码解析
前端
tiany52421 分钟前
养虾记录-如何配置多agent和多个飞书机器人独立对话
java·前端·飞书
用户8417948145622 分钟前
vue 表格 vxe-table 高亮行支持取消操作
vue.js
踩着两条虫25 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(十四):扩展与定制之插件系统开发指南
前端·vue.js·ai编程
我命由我1234526 分钟前
Element Plus - 在 el-select 的每个选项右侧添加按钮
前端·javascript·vue.js·前端框架·ecmascript·html5·js
别看我只是一直狼30 分钟前
🚀 程序员高效 Prompt 实战速查手册
前端·后端
前端付豪30 分钟前
AI Math Tutor v3:题目知识点自动分类
前端·python·llm