element-ui中表格el-table表头与内容右边框错位问题

最新推荐文章于 2023-11-23 11:09:09 发布
原创 最新推荐文章于 2023-11-23 11:09:09 发布 · 3.5k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

在使用element-ui的el-table组件时，遇到了表头和内容错位的问题。此问题在某些浏览器上出现，解决方案是在全局样式中添加特定的CSS代码以修正布局。本文提供了一个简单的修复方案。

在用element-ui实战写一个后台管理系统时遇到一个坑，就是el-table标签渲染出数据后表头和内容会有错位，如图：
在这里插入图片描述
具体原因不太清楚，估摸着是浏览器的问题，同是webkit内核的360浏览器没有出现这种情况，如图所示：
在这里插入图片描述
那么怎么解决问题，只需要在您的全局样式中添加如下css样式即可

body .el-table th.gutter{
    display: table-cell!important;
}

亲测有效！大家一起学习一起进步哦！目标前端工程师

Cwlojako
关注
解决 element-ui 的 el-table 自动吸顶（支持fixed）
态度决定一切
09-22 9385
看了很多案例，从简单的角度，position:sticky，似乎是比较理想的选择，可是当el-table设置了fixed后，这里的fixed会失效。最后还是采用了js监听滚动的思路实现。 获取表格距离顶部的距离; 设置表格距离顶部多少就吸顶---offsetTop1; 获取滚动条滚动的距离; 当滚动条滚动了 offsetTop1 后，表格就自动吸顶;
element-ui表格显示隐藏导致表头错乱
真皮的博客
12-02 707
<span v-if="activeName == 'five'"> <el-table-column key='22' prop="interviewResultsStatus" label="面试结果" header-align="center" align="center"> <template slot-scope="scope"> <el-tag v-if="scope.
el-table横向滚动时，表头与列错位
qq_41838435的博客
06-29 2763
el-table横向滚动时，表头与列错位
Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）
vidvan的专栏
11-23 7817
Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）
elementUI中el-table组件出现的表头和内容错位
lwx931449660的博客
01-26 1313
首先，出现这种问题，一般是因为对浏览器进行了缩放操作，先将缩放重置，看是否正常。 如果考虑到兼容问题，可以在app.vue中添加： .el-table th.gutter{ display: table-cell!important; } 验证有效！ ...
解决vue+element ui 在使用element表格时，出现表格表头与内容对不齐的问题
qq_59390336的博客
11-28 2664
解决vue+element ui 在使用element表格时，出现表格表头与内容对不齐的问题
解决elementUI table表格错位问题
hjg的专栏
09-02 5460
原因：因为存在滚动条时，固定列的底下没有留出高度，导致滚动条不显示。加上一个padding-bottom即可。在使用elementui的表格时，当存在固定列、横向和竖向滚动条时，滚动到最后一条会出现表格错位的问题。全局加上以下样式即可。
el-table实现该列表头居中，以及该列的单元格居右
ersorn
08-14 5804
主要是通过 header-align="center" 来设置 <el-table-column prop="materialsBill" label="物料清单" width="auto" header-align="center" :formatter="formatMaterials" align="left"> </el-table...
elementUI中el-table表格的表头样式错位
keke11211的博客
08-20 1085
版本：element-ui 2.12.0 问题描述： 使用elementUI的el-table表格组件时，表格高度定高，内容过多时右侧会出现滚动条，然后就会出现如下图所示的列错位的样式： 解决办法： 在网上也找了好多方法，试了好多改样式的方式，都没有什么用，没有达到效果，最后还是采用js的 doLayout 方法，在获取到数据后重绘表格，实现了想要的效果。代码很简单，如下： templete中给表格设置 ref 属性： <el-table :data="table" ref=
element-ui表格合并span-method的实现方法
10-16
在Element-UI框架中，表格（`el-table`）组件提供了强大的功能，其中包括表格单元格的合并。在处理复杂表格布局时，有时我们需要合并某些行或列以展示更清晰的数据结构。`span-method`属性正是为此目的而设计的，它...
element tab 导入html,element-ui中，使用el-tabs嵌套el-table，初次加载tab页时table表头和表格数据错位...
weixin_34669890的博客
07-02 2082
\#\#\# 问题描述element-ui中，使用el-tabs嵌套el-table，每个tab页下放置引入的子组件。并有v-if控制它的显示。子组件中的el-table中设置了列的宽度。问题出在初次加载tab页时table表头和表格数据错位。点击其他tab页再切换回去的时候错位消失了。下图是初次点击左侧菜单进来时的状态点击其他tab页比如已审批以后，再切回原来的第一个tab后\#\#\# 相关代...
Vue3使用element-ui的table表格错位
weixin_43871703的博客
03-09 1338
vue3使用element Plus 的table表格在搜索错位 <el-table ref="tableRef"></el-table> JS部分 const tableRef = ref(null);// 这里是在<el-table>上定义的ref，vue3需要用ref变成响应式数据 //打印里面的结构可以用 console.log(tableRef.value),一直往下找会有doLayout方法; //重新渲染的函数 const reRender =
elementui table 右侧操作栏 fixed错位问题
weixin_41955516的博客
05-25 1969
elementui table 右侧操作栏 fixed错位问题 解决办法重新计算table布局 在这里插入代码片/* 监听table数据对象 */ watch: { tableData(val) { this.doLayout(); } } /* 重新渲染table组件 */ doLayout(){ this.$nextTick(() => { that.$refs.table.doLayout() })
elementui切换页面 table操作栏错位解决办法
weixin_44363139的博客
06-28 1340
elementUI table操作栏错位 尤其是可以左滑的页面
vue elementUI怎样解决表格滚动条滑动，表格错位
ALSO666的博客
10-20 2598
vue elementUI怎样解决表格滚动条滑动，表格错位
element 表格出现下拉时出现表头错位
ting0712的博客
11-26 442
在改一个表格的时候 测试人员提出表格表头有错位现象 解决方案:使用'懒加载'doLayout 重新布局 <el-table ref="table"></el-table> mounted(){ setTimeout(()=> { this.$refs.table.doLayout() },1200) }, ...
vue"element-ui中el-tables"标签表头与内容边框错位问题
qq_24918867的博客
11-14 867
vue"element-ui中el-tables"标签表头与内容边框错位问题 vue"element-ui中el-tables"标签表头与内容边框错位问题 非常感谢这位博主我是看了他的博客才发现问题的本质，以下是他原文地址 https://blog.csdn.net/Dg_Zing/article/details/86682480 最近在使用vue，element画页面的时候发现如下问题。 上...
el-table内边框线对不齐
weixin_48205715的博客
12-16 1304
在App.vue下写全局style即可 body .el-table th .gutter { display:table-cell !important; }
element表格的有滚动条时产生错位或者偏移
weixin_44168929的博客
05-16 4976
网上有很多的方法、但是始终对我没作用，怀疑遭到了针对、但是解决方法找到了 如下： /* 修改element表头错位的问题 */ .el-table--border th.gutter:last-of-type { display: block !important; width: 17px !important; } 这个css完美解决了我的问题、再也没有烦恼了 此外再赠送一个改变滚动条样式的方法 /* 修改滚动条的样式 */ ::-webkit-scrollbar { width:
element-ui的table滚动条左右滑动时表头左右抖动错位
最新发布
05-10
### 解决 Element UI 表格滚动时表头抖动和错位问题 Element UI 的表格组件在处理大量数据或复杂布局时可能会遇到表头抖动或错位的问题。这通常是因为浏览器渲染性能不足、CSS 布局不一致或是 JavaScript 控制逻辑不够优化所导致的。 #### 1. **优化 CSS 渲染** 为了防止表头抖动，可以尝试调整表格的样式设置，确保表头和内容区域的高度一致性以及滚动行为流畅性。以下是具体的解决方案： - 设置 `transform` 属性替代传统的 `position: fixed;` 或者 `top: 0;` 来固定表头位置[^1]。 ```css .el-table__header-wrapper { transform: translateZ(0); /* 强制 GPU 加速 */ } ``` - 使用 `will-change` 提前告知浏览器哪些元素会发生变化，从而提升渲染效率。 ```css .el-table__fixed-header-wrapper, .el-table__header-wrapper { will-change: transform; } ``` #### 2. **减少 DOM 节点数量** 过多的 DOM 节点会增加页面重绘和回流的压力，尤其是在大数据量场景下。可以通过虚拟列表技术只渲染可视范围内的行数来降低压力[^1]。 #### 3. **禁用不必要的动画效果** 某些默认动画（如过渡效果）可能导致滚动过程中出现卡顿现象。建议关闭这些动画以提高性能。 ```javascript this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0; // 手动清零 scrollTop 防止跳动 }); ``` #### 4. **改进事件监听机制** 对于滚动事件频繁触发的情况，应考虑节流 (throttle) 技术以减轻 CPU 占用率。例如，在自定义滚动容器中应用防抖函数[^2]: ```javascript function throttle(fn, delay) { let lastCall = 0; return function(...args) { const now = new Date().getTime(); if (now - lastCall >= delay) { lastCall = now; fn.apply(this, args); } }; } const scrollHandler = throttle(function(event) { console.log('Scrolling...'); }, 16); // 每帧约 16ms 对应 ~60fps document.querySelector('.el-table__body-wrapper').addEventListener('scroll', scrollHandler); ``` #### 5. **升级依赖版本** 确认当前使用的 Element UI 版本是否最新。官方团队持续对已知 bug 进行修复并发布新特性支持更高效的开发模式[^1]。 --- ### 总结 综合以上方法可有效缓解甚至彻底解决 element-ui 表格在滚动过程中的表头抖动与错位问题。优先从 CSS 和 JS 方面入手调优，并视情况引入第三方插件辅助完成特定功能扩展。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值