element table表格滚动条错位问题

最新推荐文章于 2024-07-23 15:23:30 发布
最新推荐文章于 2024-07-23 15:23:30 发布
阅读量1.2k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43886711/article/details/104776637
版权
本文主要介绍了如何解决使用Element UI时遇到的表格滚动条错位问题，提供两种解决方案：一是通过权重调整之前的样式，这可以通过在入口的index.css或App.vue中添加特定样式实现；二是通过缩小表格宽度来避免滚动条错位。
摘要由CSDN通过智能技术生成

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 :data="list" ref="mutipleTable"></el-table>
最低0.47元/天 解锁文章
李芦儿
关注
专栏目录
el-table 固定表头和固定列之后 由于滚动条导致的 表格线错位
qq_45915537的博客
07-05 2920
table 直接调用tabelRevise函数即可 tableRevise(this.$refs.dirctTable.$el) //修正el-table错位 function tableRevise(table) { const tableWrapper = table.querySelector('.el-table__body-wrapper') const tableBody = table.que...
el-table 左固定列把底部滚动条覆盖 导致错位
javaMylife的博客
08-12 1546
el-table 指定固定列后 把滚动条遮住了。 解决方式：赋值后调用以下doLayout()方法 this.rowData = datapage.queryResult this.$nextTick(() => { this.$refs.multipleTable.doLayout() })
Element-ui el-table 表格 fixed 固定导致表格滚动窜行错位的解决方法
最新发布
qq_42101569的博客
07-23 561
el- table 对表格列项设置fixed 左右固定列的时候,移动滚动条到页面底部会出现表头和内容错位或者是固定列的内容错位的情况。
elementui的el-table因滚动条表格错位问题
weixin_51010848的博客
08-12 4108
min-width table-layout
element-ui表格固定列错位
Mia的博客
10-10 6146
element-ui表格固定列错位 版本：element-ui 2.13.0 谷歌滚动条原因 在使用vue进行前端开发时，使用element-ui框架，当表格过高时出现滚动条，导致底部行错位，其原因是因为表格固定列的时候，鼠标滚动是内部计算的（详细信息看源码），所有需要改源码。谷歌浏览器会发生这种情况，火狐不会发生这种情况。 资源还在审核中。。。(链接后续补) 动态改变表格的宽高 当动态改变表格宽高的时候，表头错位。可以使用doLayout方法。 在这里插入图片描述 使用方式： template: &l
element表格设置固定列后，滚动到底部错位的问题解决
waiter_hh的博客
05-26 2654
如果没有设置浏览器自带的滚动条是没有问题的，设置之后如果宽高不一致的话会导致错位的问题 解决： ::-webkit-scrollbar { width: 10px; height: 10px; } 将宽高设置为一致就解决啦~
el-table横向滚动条不显示
找师父的小白的博客
05-16 2763
在Vue中使用el-table，设置表格高度和宽度后，表格内容超出，横向滚动条没有显示，无法拖动。
element table 滚动条位置
05-09
在Element table中，如果数据量较大，会出现表格内容超出表格容器大小的情况，这时就需要使用滚动条来控制表格的显示。滚动条位置在Element table中是一个重要的属性，可以决定表格中哪部分数据会被展示出来。 ...
vue3Element-ui中el-table添加了竖向滚动条使用横向滚动条出现错位的问题
09-21
在使用Element-ui的el-table组件中，如果同时添加了竖向滚动条和横向滚动条，可能会出现错位的问题。这是因为竖向滚动条会占据一定的宽度，导致横向滚动条的位置不正确。 解决这个问题的方法是使用CSS样式来调整...
vue element table鼠标滑过背景行颜色 滚动条设置样式 名称排序
weixin_46463643的博客
11-23 1398
两种方式 第一种方式 鼠标滑过样式 背景颜色 /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-fixed滚动条被遮挡与数据列错位解决方案
weixin_44328764的博客
10-20 2760
1. 滚动条被固定列遮挡导致无法拖动 >>>.el-table__fixed-right, >>>.el-table__fixed { height: auto !important; bottom: 6px !important; // 6px为预留的滚动条高度 } 2. 数据列错位问题 pageSize改变可能会导致数据列与固定列发生错位现象 解决方法，在请求数据返回后调用列表的doLayout方法 this.$nex
css距离顶部高度_使用vue实现ElementUI中的Backtop回到顶部
weixin_39526872的博客
11-20 421
一、前言elementUI有说明文档，但我为什么还要重新写一下呢？因为文档也有坑，一开始使用时你复制进去，可能都没有效果。也不知道原因在哪，就如Backtop回到顶部的组件，不去看源码，真心不知道是怎么个所以然。一开始，我把这个组件放到我页面的底部，结果是无效果的，而且还会报css的这两个样式错误(.page-component__scroll .el-scrollbar__wrap)，看完这个文...
关于element-ui表格使用fixed后切换每页显示条数最后一行错位的问题
Fight_for_love的博客
01-18 454
如题，直接讲 首先，下图每页默认10条是正常的 然后，切换每页20条，就变成了这样 确实在百度找了好多方法，doLayout，key方法都不好使。最后发现是滚动条影响的。 解决方法，给滚动条加一个高度。 /* 设置滚动条的样式 */ ::-webkit-scrollbar { width: 5px; height: 5px; } 搞定 顺带提一嘴，当使用固定列时，一定要记得给表格加一个max-length。否则将会出现如下问题。 ...
element-ui中table组件行错位问题
weixin_45291798的博客
10-23 1779
doLayout — 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法（element-ui自带的方法）出现场景：使用keep-alive对页面进行缓存，进入页面打开控制台，切换页面后重新进入，行错位。出现场景：在table内容上下滚动过程中出现错位，但是滚动停止错位消失。解决办法：升级element-ui版本到2.15.9及以上。解决办法：页面激活时，重新渲染table。监听窗口变化，对table进行重新布局。出现场景：窗口放大缩小，行错位。
elementui表格固定列之后行错位解决
weixin_42663908的博客
09-06 2909
elementui表格在使用的固定列之后，当出现滚动条时，滚动到最后一条数据会发现对不齐。
记录element固定列并且固定高度过后，滚动到底部错位的问题解决
a1983029606的博客
05-10 1951
在做项目中遇到一个困扰我很久的问题，使用element表格固定列过后，当滚动条滑动哦那个到底部时，列表会出现错位。 问题所在： 项目中自定义了滚动条样式，设置的宽高不一样。 解决方法：将宽高设置成一样 ...
el-table横向滚动条不失效问题，页面缩小滚动条不展示
wtta.
02-27 629
el-table横向滚动条不失效问题，页面缩小滚动条不展示
已解决：element Table 滚动条首次进入不显示、偶尔切换页面后不显示，刷新当前页或改变窗口才显示
felicity_zll的博客
05-16 5693
记录一下在项目中遇到的问题，困扰了几天最终解决了。 一、问题：element Table 滚动条首次进入不显示、偶尔切换页面后不显示，刷新当前页或改变窗口才显示。 1、首次进入的效果 可以看到滚动条并没有渲染出来，但是刷新页面或者改变窗口大小。又会出现。 最后一点点查看DOM元素、发现了问题： 这是无滚动条首行最后一个单元格：； 这是又有滚动条首行最后一个单元格：； 然后再改下这个属性： 二、解决 直接在css中添加： //显示滚动条 /deep/ .el-table--scrolla
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值