el-table表格出现滚动条的时候，内容和表头对不齐

最新推荐文章于 2025-03-06 11:38:58 发布
最新推荐文章于 2025-03-06 11:38:58 发布
阅读量1.1k 收藏 9
点赞数 8
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45646663/article/details/134920401
版权

在这里插入图片描述

1，在获取表格数据完成后的位置加

this.$nextTick(() => {
 this.$refs.templateData.doLayout();
})

2,要记得在上加上ref

<el-table ref="templateData" ></el-table>

加完之后的
在这里插入图片描述

vue - elementUI实现表格自动循环滚动，Table表格组件每隔N秒无限滚动翻阅功能，el-table表格定时自动滚动效果（每秒自动向下滚动一行，当鼠标移入表格时停止滚动，移出表格继续滚动）
高级前端工程师
05-10 3056
el-table表格自动滚动，Element表格自动滚动，table实现自动循环滚动，自动每隔一段时间滚动翻阅，element-ui el-table表格自动循环滚动指令插件，定时自动滚动效果，自动滚动组件，表格自动循环滚动指令插件，用Vue实现element-ui表格实现自动滚动，Vue2+ElementUI插件:表格每秒自动滚动，实现表格自动向下滚动，表格实现表格数据动态滚动（无限滚动）详细示例代码，vue+elementui表格向下翻滚无限循环，Vue表格滚动实现，vue如何实现表格列表自动滚动，设置
【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号_el-table-column超出隐藏
2401_84411767的博客
05-01 1321
/ 判断是否开启tooltip功能。// 判断是否开启tooltip功能。// 判断表头单列字符长度。// 获取父元素的宽度。// 获取自身的宽度。
el-table 有滚动时表头表格错位
xzb的博客
11-11 939
el-table 表头表格错位
Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）
vidvan的专栏
11-23 7535
Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）
在vue2项目中el-table表格的表头和内容错位问题
最新发布
m0_62508027的博客
03-06 698
解决el-table因横向滚动条滑到最右边时，表头和内容错位问题
elementUI table fixed设置后，表格无法对齐，滚动条被覆盖
Ja_dream的博客
06-16 1301
表格滑动到最后一行后出现无法对齐的情况，这个问题主要是滚动条的原因，因为你设置了::-webkit-scrollbar{ width:1px;}，即：滚动条的width和height不一致导致的，设置成一样的就好了。注：本项目所有的el-table表格的滚动条都增加了高度，故解决方法都是写在全局样式里面，请根据实际情况，修改相应的样式。2、table开启fixed功能后，上下滚动行无法对齐。滚动条被覆盖，导致被覆盖部分没办法拖动。1. 设置公共样式，将被遮罩部分减少。1. 通过css样式，修改表格样式。
el-table横向滚动时，表头与列错位
qq_41838435的博客
06-29 2706
el-table横向滚动时，表头与列错位
element 表格出现滚动条时，错位问题
qq_38778882的博客
03-24 2058
出现上图现象的原因：表头预留的滚动条位置跟内容的宽度不一样。
ElementUI el-table 解决使用固定列出现滚动条时，行列对不齐、滚动条被遮挡、表头“样式穿透”问题
hrcsdn13的博客
08-30 728
ElementUI el-table 解决使用固定列出现滚动条时，行列对不齐、滚动条被遮挡、表头“样式穿透”问题
table内容出现滚动条和表头对齐问题
05-09
为了解决"table内容出现滚动条和表头对齐问题"，我们需要深入理解表格布局、CSS样式控制以及可能涉及到的JavaScript或jQuery解决方案。 首先，让我们了解一下HTML表格的基本结构。一个HTML表格由`<table>`元素开始...
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
el-table表格做滚动条样式处理
qq_20954567的博客
05-28 3783
vue项目中引入Element-UI并对其el-table表格做滚动条样式处理 需求分析： 主要是对table表格中的body内容做滚动处理，表头样式不做变化。初调时X轴和Y轴都做了overflow：auto滚动设置。结果当X轴右滑动后会出现表头和表格内容对不齐的问题。经测试发现是Y轴滚动条宽度占用了表格内容的宽度。所以问题的核心还是如何使XY轴滚动且X轴显示滚动条，而Y轴隐藏滚动条。 调试过程方法测试 方案一：利用父级标签隐藏子级滚动条的思路：由于针对el-table标签中的body做处理，如果在再外
element-ui table表格滚动条拉到最右侧 表头与内容不能对齐
weixin_43422861的博客
08-28 1854
element-ui table
elementui table 默认带滚动条 导致 表头不对齐问题
lllsj的博客
11-05 6058
当页面加载数据,数据条数太多,导致table出现滚动条,应该是 dom渲染问题,table默认加载没有滚动条.数据多 异步加载导致如下问题,解决方案: src->styles->index.scss 或者 APP.vue下 添加 如下 样式,缺一不可! 之前网上搜 直说 写上面的就行,但是 根本不好使!这么写,强行覆盖滚动条样式,width=滚动条宽度 就ok了! // 全局设置 b...
el-table开启fixed之后横纵滚动的时候，出现列错位的情况
qq_44741577的博客
07-01 779
自定义滚动条的宽高，但是。的滚动条宽高也同步修改。
vue解决el-table表格中表头与内容错位问题
qq_59224836的博客
07-07 4670
解决当el-table里的内容比较多的时候以及el-table表格列固定左右滑动导致的表头与内容错位问题，直接在请求数据后执行表格自带属性doLayout方法重新加载table即可完美解决。
element el-table固定列滚动错位问题和请求数据获取后表格错位问题解决方法
qq_42376239的博客
09-16 3182
一.开发实际问题场景（固定列滚动错位如下图） 二.解决方法 全局样式写 /定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/ .w-table__fixed-body-wrapper .w-table__body{ padding-bottom: 10px （此处px需和表格滚动条高度一致） } 三.请求数据获取后表格错位问题 解决方法： 在请求结束后数据绑定后加上 this.$refs. 表格ref.doLayout()来解决 ...
element表格的有滚动条时产生错位或者偏移
weixin_44168929的博客
05-16 4808
网上有很多的方法、但是始终对我没作用，怀疑遭到了针对、但是解决方法找到了 如下： /* 修改element表头错位的问题 */ .el-table--border th.gutter:last-of-type { display: block !important; width: 17px !important; } 这个css完美解决了我的问题、再也没有烦恼了 此外再赠送一个改变滚动条样式的方法 /* 修改滚动条的样式 */ ::-webkit-scrollbar { width:
element 表格出现滚动条时，出现不对齐的问题的解决方案
菜鸟的博客
09-17 4498
1.兼容谷歌浏览器以及火狐浏览器 element表格中有一个doLayout方法，使用改方法时对 Table 进行重新布局。 mounted(){ setTimeout(()=> { this.$refs.table.doLayout() },1200) } 其中的this.$refs.table是在<el-table>中使用了ref="table <template> <el-table :da..
el-table固定表头 滚动条不显示
02-20
### 解决 Element UI `el-table` 固定表头时滚动条不显示的问题 当遇到 `el-table` 的横向内容超出宽度却未显示滚动条的情况，可能是因为自定义的页面滚动条样式影响到了表格的行为[^1]。 #### 方法一：检查并调整全局滚动条样式 如果项目中存在对整个页面滚动条样式的修改，这些更改可能会干扰到 `el-table` 组件内部使用的滚动机制。建议先审查是否有类似的 CSS 定义，并尝试移除或重写这部分代码来排除冲突的可能性： ```css /* 移除可能导致问题的通用滚动条设置 */ * { /* 原有的滚动条样式覆盖规则应被取消 */ } ``` #### 方法二：针对特定情况下的解决方案 对于希望保持原有设计风格的同时修复此问题，则可以考虑通过更精确的选择器仅作用于 `.el-table__body-wrapper` 来实现既不影响其他地方又能够正常展示滚动条的效果: ```css .el-table__body-wrapper::-webkit-scrollbar { width: 8px; /* 设置合适的宽度 */ } .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #dcdcdc; border-radius: 4px; } .el-table__body-wrapper::-webkit-scrollbar-track { background-color: transparent; } ``` 以上方法适用于 Webkit 浏览器内核（如 Chrome 和 Safari），对于 Firefox 可能需要额外处理 `-moz-` 开头的相关属性。 另外，在某些情况下，即使设置了上述样式也可能因为布局原因无法看到滚动条。此时可进一步确认父级容器是否设定了 `overflow:hidden` 或者其他限制子元素溢出显示的样式，适当调整其配置以确保 `el-table` 能够正确呈现滚动效果。 最后值得注意的是，Element Plus 已经更新迭代至新版本，官方文档提供了更多关于如何定制化组件外观的方法，包括但不限于使用 scoped css、BEM 规范等方式来进行局部样式控制[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值