element el-table固定列滚动错位问题和请求数据获取后表格错位问题解决方法

最新推荐文章于 2024-05-16 10:02:21 发布
最新推荐文章于 2024-05-16 10:02:21 发布
阅读量3k 收藏
点赞数 1
分类专栏： 技术 文章标签： chrome vue.js 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42376239/article/details/120323579
版权

一.开发实际问题场景（固定列滚动错位如下图）
在这里插入图片描述

二.解决方法
全局样式写

/定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/
.w-table__fixed-body-wrapper .w-table__body{
padding-bottom: 10px （此处px需和表格滚动条高度一致）
}
三.请求数据获取后表格错位问题
解决方法：
在请求结束后数据绑定后加上 this.$refs. 表格ref.doLayout()来解决

John咸鱼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
本文将深入探讨如何解决在切换ElementUI的tab页后，`el_table`的固定列下方出现多余线条的问题，以及与之相关的固定列显示不全的场景。 首先，让我们分析问题的现象：在切换ElementUI的tab组件时，`el_table`的固定...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
element ui table表格添加flex固定列 表格出现错位问题
weixin_54259790的博客
07-22 2267
element ui table表格添加flex固定列 表格出现错位问题 如图：表格已出现错位 说明：出现这个问题的原因是因为，div.el-table__body-wrapper这个元素的高度过低，导致我们滚动的时候，设置flex固定的列的内容已经没有可出现的了，而div.el-table__body-wrapper这个元素还有一些内容没有出现，所以造成了错位 我出现这个问题主要是因为，右边的滚动条占据了表格的位置或者是因为横向的滚动条高度和垂直的滚动条的宽度不一致造成div.el-table_
Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）
vidvan的专栏
11-23 4773
Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）
element 表格滚动条滑动，表格错位
最新发布
qq_43086723的博客
05-16 306
element 表格滚动条滑动，表格错位
el-table的列过多出现header与body错位问题、缩放错位问题、滚动条列错位
weixin_34403976的博客
04-14 1475
踩坑时在网上找了一些相关的帖子,这2种实现方式最靠谱,快试试吧! 场景1 浏览器缩放 场景2 表格y过长轴加滚动条 向右滚动前正常 滚动到最后面错位 解决 方案1(我是用这个实现的,我的情况是场景1) 打开控制台会看到thead中的th有class为gutter的属性, 这个央视原本设置为display:none 需要把它改为table-cell .el-table th.gutter { display :table-cell !important } 方案2 这个调用了elment-ui.
el-table使用fixed固定一列后表格错位
qq_43765727的博客
06-02 3201
el-table使用fixed固定一列后表格错位
解决elementUI table表格错位问题
hjg的专栏
09-02 4959
原因：因为存在滚动条时，固定列的底下没有留出高度，导致滚动条不显示。加上一个padding-bottom即可。在使用elementui的表格时，当存在固定列、横向和竖向滚动条时，滚动到最后一条会出现表格错位的问题。全局加上以下样式即可。
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
在Vue.js开发中，Element UI库的`el-table`组件是一个强大的数据展示工具，它可以适应各种复杂的场景。在这个特定的案例中，我们关注的是如何实现`el-table`的无限滚动、列显示控制以及非JSON方式的列排序。下面将...
监听element-ui table滚动事件的方法
10-17
当使用Element-UI的`el-table`组件时，监听滚动事件可以帮助我们实现无限滚动加载，即用户滚动到表格底部时自动加载下一页数据。 ### 方法 1. **设置表格基础结构** 首先，我们需要创建一个包含`el-table`的Vue模板...
element的el-table中记录滚动条位置的示例代码
10-16
主要介绍了element的el-table中记录滚动条位置的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element技能点--el-table行列错位对不齐问题
热门推荐
程序员大阳
10-27 2万+
1. 问题表现 使用ElementUI的el-table后，偶然发现出现行列错位、对不齐问题。 还有一种列对不齐的，没找到截图，反正就是表格错乱。 2. 问题发现 实际上为了让表格可以垂直滚动造成的，添加了如下代码，对原生样式造成了影响。 .el-table { overflow-y: auto !important; } 3. 问题处理 直接在el-table外围添加一个div，然后固定div的高度让其垂直滚动即可。 ...
el-UI 列表，横向拉动，列显示错位的问题
ITdogg的博客
10-27 759
el-UI 列表，横向拉动，列显示错位的问题
解决el-table滚动条错位问题（完美级）
Lora_0925的博客
04-20 5621
滚动条 创建一个js文件，并在main.js引入: import Vue from "vue"; Vue.directive("tableFit", { //指令所在组件的 VNode 及其子 VNode 全部更新后调用。 componentUpdated(el, binding, vnode) { setTimeout(() => { adjustColumnWidth(el, vnode); }, 0) },
ElementUI的Table组件在无数据情况下让“暂无数据”文本居中显示
勇敢阿呆的部落阁
12-31 5676
发现问题 当有多列字段显示时，会出现底部滚动条。 此时“暂无数据”文本是根据列平铺的总宽度居中。 这样就导致初始时滚动条是在最左侧，那么“暂无数据”文本就会向右偏移。 解决办法 尝试设置“暂无数据”文本元素所在元素右侧内边距。 /deep/ .el-table__empty-block { width: 100%; min-width: 100%; max-width: 100%; padding-right: 100%; } 成功解决！ 如果你觉得此篇博客对你有帮助，请点个赞再走吧！
element 有滚动条时表格加载错位问题
weixin_42577208的博客
12-24 1488
试过这个方法但是没用 body .el-table th.gutter { display: table-cell !important; } 改成这个覆盖滚动条的样式，直接在你的父级div中加入就行 .gutter { display: block !important; width: 17px !important; } ...
element-ui表格固定列错位
Mia的博客
10-10 6097
element-ui表格固定列错位 版本：element-ui 2.13.0 谷歌滚动条原因 在使用vue进行前端开发时，使用element-ui框架，当表格过高时出现滚动条，导致底部行错位，其原因是因为表格固定列的时候，鼠标滚动是内部计算的（详细信息看源码），所有需要改源码。谷歌浏览器会发生这种情况，火狐不会发生这种情况。 资源还在审核中。。。(链接后续补) 动态改变表格的宽高 当动态改变表格宽高的时候，表头错位。可以使用doLayout方法。 在这里插入图片描述 使用方式： template: &l
自定义指令解决elementUI中table组件的column设置fixed属性后，滚动时表格无法对齐的问题
beretHat_5的博客
03-25 2042
问题： el-table组件中，column在设置了fixed属性的情况下下，垂直滚动会出现表格错位的问题。分析： column在设置了fixed=“left”或fixed=“right”后，在table的对应位置增加了对应个数的column，它们都被设置为position: fixed。下面的table只是被固定的column遮盖，当垂直方向有滚动事件时，两侧固定column会动态计算滚动高度。但是实际使用中计算的时候会受头部样式或padding的影响而计算出错，导致出现表格错位的问题。
el-table表格出现滚动条的时候，内容和表头对不齐
weixin_45646663的博客
12-11 788
1，在获取表格数据完成后的位置加。2,要记得在上加上ref。
el-table固定列滚动错位
07-13
您好！对于 el-table 固定列滚动错位的问题，可能有几个原因导致。我可以提供一些常见的解决方法，请您尝试以下步骤： 1. 确保您的 el-table 组件的父容器有明确定义的宽度。如果父容器没有指定宽度，固定列可能会在滚动时错位。 2. 检查固定列的宽度设置。固定列应该有明确的宽度，可以通过设置 column 的 width 属性来实现。确保所有固定列的宽度总和等于表格的总宽度。 3. 如果固定列中包含了复杂的内容或组件，可能会导致滚动错位。请确保固定列中的内容不会影响到滚动行为，可以尝试简化固定列的内容。 4. 如果以上方法都无法解决问题，您可以尝试使用 el-table 的 scroll 方法来手动设置滚动条的位置，以确保固定列与滚动内容对齐。具体操作可以参考 Element UI 官方文档中的 "Table 滚动加载" 部分。 希望这些方法能帮助您解决 el-table 固定列滚动错位的问题！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值