elementui 因滚动条引发的table错位问题

最新推荐文章于 2024-07-13 00:19:45 发布
最新推荐文章于 2024-07-13 00:19:45 发布
阅读量6.2k 收藏 4
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39121482/article/details/104049061
版权

在这里插入图片描述
全网的那种全局模式，或是给组件挂载一个ref方式，试了千千万，table都纹丝不动的错位着，后来就从审查元素里一个一个往下级找，然后找到了给下图红框框添加宽度的元素
在这里插入图片描述
在这里插入图片描述
加上就好啦，姜姜姜姜

一只小猪弟
关注
el-table-fixed滚动条被遮挡与数据列错位解决方案
weixin_44328764的博客
10-20 2761
1. 滚动条被固定列遮挡导致无法拖动 >>>.el-table__fixed-right, >>>.el-table__fixed { height: auto !important; bottom: 6px !important; // 6px为预留的滚动条高度 } 2. 数据列错位问题 pageSize改变可能会导致数据列与固定列发生错位现象 解决方法，在请求数据返回后调用列表的doLayout方法 this.$nex
关于ElementUI中table组件的column过多出现header与body错位的问题
m943917709的博客
08-28 1813
在使用elementUI的table组件时，很赞赏组件的丰富性，充分考虑到了使用者的各种稀奇古怪的需求，但是也会遇到一些不尽人意的小bug 今天我就遇到了在动态渲染column的时候，由于column过多，出现了滚动条，此时滚动越往后header与body就会出现不同程度的错位，而且只有在分辨率>125%的时候出现,调为100%的话就没事了，其他比例的分辨率也会不同几率的出现这个问题 首先看文档有没有解决方案 看描述的话应该能解决这个问题吧，虽然不是由隐藏切换的，但是动态添加应该也算吧，
layui.table设置多表格后出现横轴滚动时出现表头和明细错乱
qilingxuanzhuan的博客
06-21 838
解决:在只有单行的第一列上加上colGroup:true,后面的列加上field,否则出现明细为空 (注:有四行的表头的话，前面三行对应的字段都要添加colGroup:true)
关于antdv表格a-table设置scroll属性后表格行错位解决方案
热门推荐
cabinx的博客
01-15 1万+
antdv表格a-table设置scroll属性后表格行错位解决方案 1.需求背景 最近开发财务项目中使用到了UI框架antdv，使用a-table后需要设置表格一屏显示，即表格内容超过了屏幕之后显示滚动条，但是表格行内容出现错位。 解决方案 1.先设置a-table的scroll属性，如下： <a-table ref="table" size="small" rowKey="id" :columns="columns"
element-ui 表格固定头和固定列表格错位
最新发布
weixin_64684095的博客
07-13 797
当 el-table 组件固定了表头和列时，列表数据触发滚动条，列表滚动到底，会有错位。因为固定列和固定表头产生的滚动条宽度不一致，导致有轻微误差。自定义滚动条高度，将滚动条高度设置小一点且一致。
关于elementui，el-table标签使用了纵向滚动条以后会出现横向滚动条的思考
qq_52168726的博客
12-27 2327
在使用el-tab-pane和el-table结合的时候需要纵向滚动条但是不需要横向滚动条需要的实现的效果如下 但是却出现了 因为在点击的时候页面重新渲染了没有及时给table进行设置颜色，需要给table设置颜色才可以 设置背景颜色是透明就可以进行解决 ...
解决el_table表格 表头内容太多横向滑动 表头和表格内容错位的问题
weixin_44358678的博客
06-20 920
el-table 表格错位的问题
表格出现滚动条引起的分割线错位有好的解决方案吗？
weixin_43524562的博客
07-07 389
＜table＞标签创建的表格，表头、表体出现错位的问题
One_Punch_Devil的博客
03-17 964
一般出现表格错位的问题，造成原因一般都是滚动条，当我们把横向的滚动条设为true时，当滚动条出现时，表格就不会出现错位。1.将滚动条设置为显示，或隐藏这两种模式的其中一种，而不是使用auto。2.将表头和表体的长度定位一个固定的值，不会随滚动条的出现而变化。此时进入网页开发着模式会发现表体的空间与表头的空间不一致。当横向滚动条隐藏时，表格就会出现错位。
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
12-30
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的： 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 然后直接上template代码： ...
手写合计行代替elementui自带的合计功能解决合计行在横向滚动条下方的问题
tsw529的博客
08-07 997
前言 这段时间做后台管理项目,涉及到element表格的合计功能,但是当出现横向滚动条的时候发现合计一行在滚动条的下方,不符合产品需求.百度了一下,网上好多处理方案,基本上都是修改样式,如下面的代码: .el-table { overflow: auto; } .el-table--scrollable-x .el-table__body-wrapper { overflow-x: visible; } .el-table__body-wrapper, .el-table__header
el-table横向滚动时表头与表体的内容速度不一致（错位）
weixin_44817180的博客
05-11 2249
<div class="table-overflow-x"> <el-table v-if="ifCollectionAccountSelect != '1'" :data="tableData" ref="dataTable" id="dataTable" style="width: 100%" :height="dataTableHeight" :span-method="arraySpanMethod" empty-text="暂无数据"> ...
【a-table表格内容移动表头不跟随移动的解决方案】
Alice_LiLi的博客
09-16 4654
1、在colums中给每个列头加上宽度，width：xxx。问题1：当表格需要呈现的内容过多，溢出表格本身的宽度。增加scroll滚动条。
el-table 有滚动时表头表格错位
xzb的博客
11-11 830
el-table 表头表格错位
ant design vue a-table 表头和内容不对齐，一行代码解决问题
陈新科的博客
11-24 3681
动态设置x轴的长度就可以了，有几列表头就设置成百分之几，完美~ <a-table :columns="columns" :data-source="data" size="small" :loading="loading2" :scroll="{ x: `${columns.length}0%`, y: 400 }"//关键代码 > ...
Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）
vidvan的专栏
11-23 6153
Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）
element-plus el-table表体滚动而表头未滚动
qq_26889291的博客
03-30 1353
造成的原因是因为在el-table直接加了一个类(pading:20px)解决方法用div包裹el-table，且把这个类加在div上。
关于修改默认滚动条宽高后，造成el-table表格错位的问题的解析
qq_33767912的博客
02-11 6971
实现整体表格的样式，在修改了滚动条的高度、宽度后，预留位置大小未变造成错位现象，那么我们就需要修改预留位置大小即可，el-table__fixed-body-wrapper才是真正数据表格。正是这个js输出的预留位置大小，class为。那我们在elementUI源码中去寻找，这个属性，这是右侧预留位置的class。F12发现表格真的是由三个部分组成。说明可能中间与错位的两侧不是一体。与layout有关，继续查找。一路向下搜索找到，最终找到。经过一顿操作，终于找到了。的元素的掌控预留位置。
elementui table 默认带滚动条 导致 表头不对齐问题
lllsj的博客
11-05 5819
当页面加载数据,数据条数太多,导致table出现滚动条,应该是 dom渲染问题,table默认加载没有滚动条.数据多 异步加载导致如下问题,解决方案: src->styles->index.scss 或者 APP.vue下 添加 如下 样式,缺一不可! 之前网上搜 直说 写上面的就行,但是 根本不好使!这么写,强行覆盖滚动条样式,width=滚动条宽度 就ok了! // 全局设置 b...
elementui table 滚动条样式
03-30
您可以使用以下CSS样式自定义elementui表格的滚动条： .el-table__body-wrapper::-webkit-scrollbar { width: 8px; height: 8px; } .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 5px; } .el-table__body-wrapper::-webkit-scrollbar-track { background-color: #f5f5f5; } 请注意，这只是一个示例样式，您可以根据自己的需要进行更改和调整。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值