el-UI 列表，横向拉动，列显示错位的问题

最新推荐文章于 2024-09-13 14:24:23 发布
最新推荐文章于 2024-09-13 14:24:23 发布
阅读量887 收藏 4
点赞数 3
CC 4.0 BY-SA版权
文章标签： elementui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ITdogg/article/details/127550820
开发时给列表增加字段，测试发现横向拉动条拉至最右侧时列表内容展示错位。经与前端大佬观察，发现错位宽度为右侧竖下拉条宽度，通过在代码中增加样式修改属性解决了该问题，还希望有更好方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

        开发过程中，对列表进行了增加字段，结果测试时候发现，当横向拉动条拉至最右侧，列表内容展示错位了。

 经过和前端大佬一起观察，发现了问题所在：

列表中所错位的宽度，正好就是右侧竖的下拉条的宽度。

然后在代码中，增加了样式，修改这一属性：

#ID.el-table__body-wrapper {
      overflow-y: overlay;
  }

 列表错位问题得以解决！如果有更好的方法，请大佬告知一下！

el-table横向滚动时表头与表体的内容速度不一致（错位）
weixin_44817180的博客
05-11 2512
<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="暂无数据"> ...
el-table fixed固定列导致错位的解决方案
热门推荐
青年码农
07-27 2万+
点击上方“青年码农”关注回复“特效源码”可获取各种资料Element UI table组件可以通过设置fixed属性实现列的固定，但是在某些情况下会导致固定列的样式错乱，下面就总结下解决样式错乱实现方案1.doLayout（官方提供）对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。2.<el-table>标签上...
element-ui table表格滚动条拉到最右侧 表头与内容不能对齐
m0_51041905的博客
12-20 3092
1.问题概述 当表格数据太多，会出现纵向滚动条，把滚动条拉到最右侧时，会出现表头与内容不能对齐的现象 2.解决方法 1.当页面数据加载完毕后，在后面加上 this.$nextTick(() => { this.$refs.table.doLayout(); }) doLayout是element提供的方法，它的作用是对Table进行重新布局。 2.别忘了给表格加上ref属性 <el-table ref="table"></el-table> 然后就大
vue elementUI怎样解决表格滚动条滑动，表格错位
ALSO666的博客
10-20 2552
vue elementUI怎样解决表格滚动条滑动，表格错位
elememtui表格横向滚动条，表格错位
Fray_Zyt的博客
04-24 417
elememtui表格横向滚动条，表格错位
解决elementUI table表格错位问题
hjg的专栏
09-02 5273
原因：因为存在滚动条时，固定列的底下没有留出高度，导致滚动条不显示。加上一个padding-bottom即可。在使用elementui的表格时，当存在固定列、横向和竖向滚动条时，滚动到最后一条会出现表格错位的问题。全局加上以下样式即可。
vue3Element-ui中el-table添加了竖向滚动条使用横向滚动条出现错位的问题
09-21
在使用Element-ui的el-table组件中，如果同时添加了竖向滚动条和横向滚动条，可能会出现错位的问题。这是因为竖向滚动条会占据一定的宽度，导致横向滚动条的位置不正确。 解决这个问题的方法是使用CSS样式来调整...
el-table固定列错位问题
03-19
### 关于 Element-UI 中 `el-table` 固定列错位问题的解决方案 #### 1. 背景分析 当使用 `el-table` 的固定列功能时，可能会遇到样式高度错乱或表头错位的问题。这通常发生在以下场景中： - 表格存在滚动条时。 - ...
【elementui】记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法
bbt953的博客
07-24 1197
记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法
解决el-table 设置右侧固定列后横向滚动条被遮挡
最新发布
03-27
好的，我现在需要解决用户提到的element-ui中el-table设置右侧固定列后横向滚动条被遮挡的问题。根据用户提供的引用内容，我需要综合这些信息来找到合适的解决方案。 首先，用户提到当只有固定列时，可以通过设置...
el-table 有滚动时表头表格错位
xzb的博客
11-11 959
el-table 表头表格错位
解决element表格因为列太多，拉动横向滚动条表格错位的问题
锦瑟年华L的博客
09-13 656
解决element表格因为列太多，拉动横向滚动条表格错位的问题
el-table横向滚动时，表头与列错位
qq_41838435的博客
06-29 2735
el-table横向滚动时，表头与列错位
element 表格出现滚动条时，错位问题
qq_38778882的博客
03-24 2074
出现上图现象的原因：表头预留的滚动条位置跟内容的宽度不一样。
elementui的el-table因滚动条表格错位问题
weixin_51010848的博客
08-12 4665
min-width table-layout
解决el_table表格 表头内容太多横向滑动 表头和表格内容错位的问题
weixin_44358678的博客
06-20 1046
el-table 表格错位的问题
vue element ui 使用el-table 组件的时候，列使用fixed，表格滚动后出现错位
weixin_42539372的博客
04-17 9191
表格滚动之后fixed列和其他列出现如下错位的情况 在网上找了很多办法，doLayout也不起作用，给column设置：key="index+Math.random()"也不起作用,然后就用监听滚动条的方法写了： this.dom = this.$refs.multipleTable.bodyWrapper console.log(this.dom) this.dom.addEven...
Vue进阶（幺幺玖）：element-ui table组件适应性问题（横向滚动条）
IT全栈 华强工作室
05-29 6910
在开发前端项目过程中，解决适配性、兼容性问题是经常遇到且费事费力的苦差事，尤其是在开发Vue项目，应用部署在IE（尤其是IE9）上的时候。 在进行动态展示（根据后台返回的表头、表数据展示）搜索结果时，会遇到搜索结果适配屏幕宽度或高度，但是却会出现纵向或横向滚动条的现象，通过F12调试页面元素，会发现动态的增删overflow:auto元素属性，会解决以上问题。由此可知，动态渲染页面元素时，页面加载之前，由于页面元素尚未完全加载计算元素属性值结束，会造成屏幕出现不适配，即会出现横向纵向滚动条的问题，现在的解决
关于ElementUI表格错位问题
m0_47005349的博客
03-31 356
关于ElementUI表格错位问题关于ElementUI表格错位问题 关于ElementUI表格错位问题
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ITdogg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值