vue3中,el-table表格固定列后出现表格线段折断的问题

方式1:CSS 样式修复(最直接有效)-亲测有效

css 复制代码
/* 解决固定列与主体表格线条错位问题 */
.el-table__fixed,
.el-table__fixed-left,
.el-table__fixed-right {
  /* 核心:固定列高度减去滚动条高度(一般为 10px-17px) */
  height: calc(100% - 12px) !important;
}

.el-table__fixed-body-wrapper {
  height: 100% !important;
}

.el-table__fixed-body-wrapper .el-table__body {
  /* 为固定列内容区域添加底部内边距,模拟滚动条占位 */
  padding-bottom: 10px !important;
}

方式2:调用 doLayout 方法(动态修复)-亲测无效,可以试试

javascript 复制代码
// 假设你的 el-table 有 ref="tableRef"
this.$nextTick(() => {
  if (this.$refs.tableRef) {
    this.$refs.tableRef.doLayout()
  }
})
相关推荐
馬致远2 小时前
Win7 配置 Vue脚手架
javascript·vue.js·ecmascript
一见2 小时前
WorkBuddy安装Skill的方法
android·java·javascript
代码煮茶2 小时前
Vite 工程化实战 | 从 0 配置一个企业级前端项目(按需引入 / 环境变量 / 打包优化)
前端·vue.js
踩着两条虫2 小时前
AI 驱动的 Vue3 应用开发平台 深入探究(九):双向代码转换之处理事件、Props 和指令
前端·vue.js·ai编程
badhope2 小时前
GitHub热门AI技能Top20实战指南
前端·javascript·人工智能·git·python·github·电脑
踩着两条虫2 小时前
AI 驱动的 Vue3 应用开发平台 深入探究(八):双向代码转换之 模板编译与AST转换
前端·vue.js·ai编程
神秘的猪头3 小时前
🚀 深入浅出 Event Loop:带你彻底搞懂 JS 执行机制
前端·javascript·面试
爱宇阳3 小时前
Swiper 12 全屏滚动:优雅处理最后一屏高度不一致的问题
前端·javascript·vue.js