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

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

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

一只小猪弟
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
element table表格滚动条错位问题
weixin_43886711的博客
03-10 1272
1.用权重改变之前的样式 放在入口 index.css 或者App.vue body .el-table th.gutter{ display: table-cell !important; } body .el-table colgroup.gutter{ display: table-cell !important; } 2.缩小table // <el-table :dat...
element ui的table表格因竖向滚动条导致表头错位问题解决
themansea的博客
12-17 3561
出现问题： 在vue项目中引入table组件，当将表格高度固定出现竖向滚动条，而且横向滚动条滚到最右边时，就会出现表头与内容错位的问题，如图 解决方法： Step1：在app.vue中加入css样式 <style> /* 解决表格错位 */ .el-table--border th.gutter:last-of-type { display: block!important; width: 17px!important; } </style> 解决后：
解决el_table表格 表头内容太多横向滑动 表头和表格内容错位的问题
weixin_44358678的博客
06-20 917
el-table 表格错位的问题
element-ui 表格固定头和固定列表格错位
最新发布
weixin_64684095的博客
07-13 714
当 el-table 组件固定了表头和列时，列表数据触发滚动条，列表滚动到底，会有错位。因为固定列和固定表头产生的滚动条宽度不一致，导致有轻微误差。自定义滚动条高度，将滚动条高度设置小一点且一致。
关于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"
关于elementui，el-table标签使用了纵向滚动条以后会出现横向滚动条的思考
qq_52168726的博客
12-27 2324
在使用el-tab-pane和el-table结合的时候需要纵向滚动条但是不需要横向滚动条需要的实现的效果如下 但是却出现了 因为在点击的时候页面重新渲染了没有及时给table进行设置颜色，需要给table设置颜色才可以 设置背景颜色是透明就可以进行解决 ...
表格出现滚动条引起的分割线错位有好的解决方案吗？
weixin_43524562的博客
07-07 389
＜table＞标签创建的表格，表头、表体出现错位的问题
One_Punch_Devil的博客
03-17 939
一般出现表格错位的问题，造成原因一般都是滚动条，当我们把横向的滚动条设为true时，当滚动条出现时，表格就不会出现错位。1.将滚动条设置为显示，或隐藏这两种模式的其中一种，而不是使用auto。2.将表头和表体的长度定位一个固定的值，不会随滚动条的出现而变化。此时进入网页开发着模式会发现表体的空间与表头的空间不一致。当横向滚动条隐藏时，表格就会出现错位。
【a-table表格内容移动表头不跟随移动的解决方案】
Alice_LiLi的博客
09-16 4612
1、在colums中给每个列头加上宽度，width：xxx。问题1：当表格需要呈现的内容过多，溢出表格本身的宽度。增加scroll滚动条。
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
12-30
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的： 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 然后直接上template代码： ...
el-table-fixed滚动条被遮挡与数据列错位解决方案
weixin_44328764的博客
10-20 2733
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 1808
在使用elementUI的table组件时，很赞赏组件的丰富性，充分考虑到了使用者的各种稀奇古怪的需求，但是也会遇到一些不尽人意的小bug 今天我就遇到了在动态渲染column的时候，由于column过多，出现了滚动条，此时滚动越往后header与body就会出现不同程度的错位，而且只有在分辨率>125%的时候出现,调为100%的话就没事了，其他比例的分辨率也会不同几率的出现这个问题 首先看文档有没有解决方案 看描述的话应该能解决这个问题吧，虽然不是由隐藏切换的，但是动态添加应该也算吧，
手写合计行代替elementui自带的合计功能解决合计行在横向滚动条下方的问题
tsw529的博客
08-07 992
前言 这段时间做后台管理项目,涉及到element表格的合计功能,但是当出现横向滚动条的时候发现合计一行在滚动条的下方,不符合产品需求.百度了一下,网上好多处理方案,基本上都是修改样式,如下面的代码: .el-table { overflow: auto; } .el-table--scrollable-x .el-table__body-wrapper { overflow-x: visible; } .el-table__body-wrapper, .el-table__header
vue element table鼠标滑过背景行颜色 滚动条设置样式 名称排序
weixin_46463643的博客
11-23 1395
两种方式 第一种方式 鼠标滑过样式 背景颜色 /deep/ { .el-table { tbody tr { &:hover { td { background-color: rgb(19, 75, 132); //颜色必须是rgb } } } } } 第二种方式 /deep/.el-table--enable-row-hover .el-table__body tr:hover > td
el-table 有滚动时表头表格错位
xzb的博客
11-11 820
el-table 表头表格错位
ant design vue a-table 表头和内容不对齐，一行代码解决问题
陈新科的博客
11-24 3622
动态设置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 5971
Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）
element-plus el-table表体滚动而表头未滚动
qq_26889291的博客
03-30 1347
造成的原因是因为在el-table直接加了一个类(pading:20px)解决方法用div包裹el-table，且把这个类加在div上。
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: #c1...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值