表格数据生成滚动条后 显示错位问题

已于 2022-06-02 16:48:54 修改
阅读量471 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript
于 2022-06-02 16:29:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xfWgaoqiang/article/details/125103065
本文探讨了在前端开发中遇到的表格布局错位问题及其解决方案。通过在列表接口成功获取数据并赋值后，利用this.$nextTick()确保DOM更新，并调用this.$refs.table.doLayout()修复表格错位。同时，还介绍了如何处理el-popover关闭问题，通过触发document.body.click()实现。

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

在列表接口成功表格数据赋值后添加

 this.$nextTick(() => {
          this.$refs.table.doLayout(); // 解决表格错位
        });

el-popover 关闭问题

在需要关闭的按钮方法中触发 body 的点击事件

 document.body.click()
长发飘飘.
关注
（已解决）jspdf + html2canvas实现导出html为PDF文件（高清、分页）解决图片和表格被分割截断以及滚动条的问题。（含源码及详细解释）
c1007857613的专栏
05-30 3482
jspdf + html2canvas实现导出html为PDF文件（高清、分页）解决图片和表格被分割截断以及滚动条的问题。（含源码及详细解释）
手写合计行代替elementui自带的合计功能解决合计行在横向滚动条下方的问题
tsw529的博客
08-07 1111
前言 这段时间做后台管理项目,涉及到element表格的合计功能,但是当出现横向滚动条的时候发现合计一行在滚动条的下方,不符合产品需求.百度了一下,网上好多处理方案,基本上都是修改样式,如下面的代码: .el-table { overflow: auto; } .el-table--scrollable-x .el-table__body-wrapper { overflow-x: visible; } .el-table__body-wrapper, .el-table__header
layui 数据表格横向滚动条位置 调整滚动条位置在合计下方
qq_33360016的博客
09-10 3217
layui 数据表格横向滚动条位置调整滚动条位置在合计下方 调整滚动条位置在合计下方 查阅layui table 源码得知其处理如下： 所以我们反向处理一下同步就行： 样式调整 <style> .layui-table-total { overflow: auto; } .layui-table-body { overflow: hidden; } </s
layui 表格 固定列覆盖滚动条导致 表格错位
某人的小猫
07-30 6769
对于layui，大家都用过吧：轻量级框架，使用方便，快捷，入手难度小，但是这些优点就不代表你没有踩到它的坑。 目前遇到一个问题，搞得焦头烂额的，也问了很多的人，度娘也是无能为力。 先来几张图吧： 第一：滚动条在固定列的上面---固定列方法：fixed: 'right' ，固定在表格右边 问题： 改变表格高度后--上，下拉动或者放大缩小页面或者页面过小后，滚动条被固定列覆盖，表格...
layui 弹出层表格 表头表体列错位 滚动条补丁列缺失 soultable
Apricity0415的博客
11-17 715
弹出层表格拉动横向滚动条发现最后几列表头和表体错位了，错位宽度刚好是纵向滚动条的宽度。仔细一看是纵向滚动条顶上的表头补丁列缺失了。网上找了好几个方法，都不起作用。所以在表格的最后写了个空白列，并在done回调中移除表体空白列，只保留表头空白列，去弥补这个补丁列。表格用了soultable插件，不知道有没有相关关系。
当有横向滚动条时动态添加数据行，发生错位
weixin_38938336的博客
05-28 383
因为表头未
layui.table设置多表格后出现横轴滚动时出现表头和明细错乱
qilingxuanzhuan的博客
06-21 935
解决:在只有单行的第一列上加上colGroup:true,后面的列加上field,否则出现明细为空 (注:有四行的表头的话，前面三行对应的字段都要添加colGroup:true)
jsp中实现带滚动条的table表格实例代码
10-21
在网页设计中，有时我们需要展示大量的数据，这时使用带有滚动条的表格就显得尤为重要。本文将详细介绍如何在JSP（JavaServer Pages）中实现一个带有滚动条的table表格，通过实例代码来帮助理解这一功能。 首先，让...
el-table横向滚动条鼠标点击时错位，无法跟随鼠标
06-09
在 el-table 中，表头和表格内容的列宽度必须完全匹配，否则会出现鼠标点击时横向滚动条错位的问题。 解决这个问题的方法是，确保 el-table 的表头和表格内容的列宽度完全一致。您可以检查以下几个方面： 1. 确保 ...
动态生成的layui table，如果出现竖向滚动条导致表头和内容没对齐，css如何解决，完整实例
11-08
在动态生成的layui表格中遇到垂直滚动条导致表头和内容错位的问题，通常是因为表格高度超过了浏览器可视区域，或者是设置了固定宽度而列的内容过长。要解决这个问题，你可以通过CSS调整以下几个方面： 1. **设置...
layui-table表格固定列错位问题
weixin_42284211的博客
12-10 5135
当表格行高动态发生变化时，固定列行高不变导致的表格错位问题 解决方法： 在layui-table加载完成的done回调函数中，动态监听table行高，添加以下代码 done: function (res, curr, count) { $("[data-field='lowerHairPath']").css('display', 'none'); $(".layui-table-main tr").each(function
layui控制table列长度_00011 - layui 表格table列固定宽，且超出屏幕时横向滚动
weixin_30396323的博客
01-27 1146
var tableIns = table.render({elem:‘#taskOptLogListTable‘,url: ctx+‘/task/taskOptLog/query‘,error:admin.error,cellMinWidth: 80,toolbar: ‘#taskOptLogListTable-toolbar‘,defaultToolbar: [{title: ‘条件过滤‘ //...
layui数据表格换行，错位
huatian_banmu的博客
09-06 3125
给样式里添加 .layui-table-cell { height: inherit; } 给回调了加入下面代码 done: function(data, count){ //如果是异步请求数据方式，res即为你接口返回的信息。 //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count...
layui table 纵向滚动条导致单元格表头表体错位问题
最新发布
wqnmlgbsz的博客
11-28 693
我用的时layui2.6.8版本 历史项目维护，bug给我让我做了，本来利用前端手段强解决，后来发现很多table 找了解决办法 打开layui-v2.6.8/lay/modules/table.js 如果打开后时压缩的代码 直接搜索 e.find(".layui-table-patch") 找到 然后把 改成 2.如果是直接下载的table.js 则 到table.js源码中→搜索 →纵向滚动条宽度，找到了，并按下图修改 注，因没有代码 引用的layui table表格
elementUI因滚动条导致的table错位（源码修改）
a806488840的博客
08-14 553
导致这种问题的主要原因是这里的e.scrollY为false，也就是说UI框架认为当前界面没有纵向滚动条 所有我们在这里加个判断就好（if(this.$el.offsetHeight>e.viewportHeight){e.scrollY=true}）
llayui多表头，数据错位，多出很多列，解决方案
gs981600308的博客
08-02 8595
代码如下： <table class="layui-table" lay-filter="cszx" lay-data="{url: '../../json/cszx.json', height: 'full-0', cellMinWidth: 60, page: true}"> <thead> <tr> <th lay-data="{al...
解决layui table使用fixed之后，表格与fix列错位
xtho62的博客
12-15 4780
Layui fixed:‘left’ 或者’right’对不齐 应该怎么办？这个问题和出现纵向滚动轮有关系，没有的时候都是没有问题的，因为渲染的时候出现了固定列和表格的层级关系问题。 错位展示： 在不改源码的前提下修复这个问题： 即在table渲染的done函数调用处理函数：代码如下 , done: function () { $(".layui-table-main tr").each(function (index, val) { $(".layui-table-fixed").ea
layui table翻页滚动条位置保持不变
与其用泪水悔恨昨天，不如用汗水拼搏今天
06-24 8377
最近使用了layui table但是发现了一系列问题，由于被封装过不好自己修改，比如翻页后滑动条每次都会复位，导致体验不好，通过调试，我发现layui table并没有给div加标签，我通过class定位表格div位置。可以看到 滚动条所在div class="layui-table-body layui-table-main"我在layui table定义了一个父div,防止多个table &...
layui table 表头与表体内容错位
55555的博客
12-04 6221
问题 使用layui渲染table，加载出来的表格表头与表体错位了，但是点击新增重新渲染又能对齐 解决 查阅了相关资料，有以下几种情况 1、cols中的数据多了一个逗号，导致渲染出现问题，这个问题我检查了并没有多出逗号 2、cols没有定义列宽，给每个列添加宽度：width:80，问题解决 table.render({ elem: '#add_table' //指定原始表格元素选择器（推荐id选择器） // ,height: 500 //容器高度 // ,w
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值