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

原创 已于 2022-06-02 16:48:54 修改 · 497 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2022-06-02 16:29:06 首次发布
本文探讨了在前端开发中遇到的表格布局错位问题及其解决方案。通过在列表接口成功获取数据并赋值后，利用this.$nextTick()确保DOM更新，并调用this.$refs.table.doLayout()修复表格错位。同时，还介绍了如何处理el-popover关闭问题，通过触发document.body.click()实现。

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

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

el-popover 关闭问题

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

 document.body.click()
长发飘飘.
关注
layui 数据表格横向滚动条位置 调整滚动条位置在合计下方
qq_33360016的博客
09-10 3270
layui 数据表格横向滚动条位置调整滚动条位置在合计下方 调整滚动条位置在合计下方 查阅layui table 源码得知其处理如下： 所以我们反向处理一下同步就行： 样式调整 <style> .layui-table-total { overflow: auto; } .layui-table-body { overflow: hidden; } </s
jsp中实现带滚动条的table表格实例代码
10-21
在网页设计中，有时我们需要展示大量的数据，这时使用带有滚动条的表格就显得尤为重要。本文将详细介绍如何在JSP（JavaServer Pages）中实现一个带有滚动条的table表格，通过实例代码来帮助理解这一功能。 首先，让...
layui 表格 固定列覆盖滚动条导致 表格错位
某人的小猫
07-30 6866
对于layui，大家都用过吧：轻量级框架，使用方便，快捷，入手难度小，但是这些优点就不代表你没有踩到它的坑。 目前遇到一个问题，搞得焦头烂额的，也问了很多的人，度娘也是无能为力。 先来几张图吧： 第一：滚动条在固定列的上面---固定列方法：fixed: 'right' ，固定在表格右边 问题： 改变表格高度后--上，下拉动或者放大缩小页面或者页面过小后，滚动条被固定列覆盖，表格...
layui 弹出层表格 表头表体列错位 滚动条补丁列缺失 soultable
Apricity0415的博客
11-17 787
弹出层表格拉动横向滚动条发现最后几列表头和表体错位了，错位宽度刚好是纵向滚动条的宽度。仔细一看是纵向滚动条顶上的表头补丁列缺失了。网上找了好几个方法，都不起作用。所以在表格的最后写了个空白列，并在done回调中移除表体空白列，只保留表头空白列，去弥补这个补丁列。表格用了soultable插件，不知道有没有相关关系。
当有横向滚动条时动态添加数据行，发生错位
weixin_38938336的博客
05-28 403
因为表头未
layui.table设置多表格后出现横轴滚动时出现表头和明细错乱
qilingxuanzhuan的博客
06-21 973
解决:在只有单行的第一列上加上colGroup:true,后面的列加上field,否则出现明细为空 (注:有四行的表头的话，前面三行对应的字段都要添加colGroup:true)
AntDesignVue表格使用横向滚动条的时候快速向左或者向右移动横向滚动条表格表头跟表格数据不是一起滚动的
最新发布
09-27
首先，用户的问题是关于AntDesignVue表格的：当使用横向滚动条时，快速左右移动滚动条会导致表头和表格数据不同步滚动的问题。用户提供了几个引用，但这些引用似乎是从其他库（如Element Plus）中来的，我需要参考...
兼容主流浏览器的表格滚动条JS插件
因此，“表格加滚动条”插件通过智能化的DOM操作与CSS样式控制，解决了传统HTML表格在大数据量下布局混乱、交互体验差的问题。 该插件的最大亮点在于其出色的浏览器兼容性，明确支持包括IE6/7/8/9在内的老旧版本...
el-table横向滚动条鼠标点击时错位，无法跟随鼠标
06-09
在 el-table 中，表头和表格内容的列宽度必须完全匹配，否则会出现鼠标点击时横向滚动条错位的问题。 解决这个问题的方法是，确保 el-table 的表头和表格内容的列宽度完全一致。您可以检查以下几个方面： 1. 确保 ...
Ant Design Vue 表格固定表头之后 使用横向滚动条的时候 快读向左或者向右移动横向滚动条 表格表头跟表格数据 不是同步向左或者向右移动 如何解决
09-27
首先，用户的问题是关于Ant Design Vue表格的特定问题：固定表头后，快速移动横向滚动条时，表头与表格数据不同步移动。用户引用了几个相关的讨论，我需要基于这些引用和系统指令来构建答案。 关键系统指令： - ...
layui-table表格固定列错位问题
weixin_42284211的博客
12-10 5248
当表格行高动态发生变化时，固定列行高不变导致的表格错位问题 解决方法： 在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 1161
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 3153
给样式里添加 .layui-table-cell { height: inherit; } 给回调了加入下面代码 done: function(data, count){ //如果是异步请求数据方式，res即为你接口返回的信息。 //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count...
layui table 纵向滚动条导致单元格表头表体错位问题
wqnmlgbsz的博客
11-28 769
我用的时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 570
导致这种问题的主要原因是这里的e.scrollY为false，也就是说UI框架认为当前界面没有纵向滚动条 所有我们在这里加个判断就好（if(this.$el.offsetHeight>e.viewportHeight){e.scrollY=true}）
llayui多表头，数据错位，多出很多列，解决方案
gs981600308的博客
08-02 8641
代码如下： <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 4916
Layui fixed:‘left’ 或者’right’对不齐 应该怎么办？这个问题和出现纵向滚动轮有关系，没有的时候都是没有问题的，因为渲染的时候出现了固定列和表格的层级关系问题。 错位展示： 在不改源码的前提下修复这个问题： 即在table渲染的done函数调用处理函数：代码如下 , done: function () { $(".layui-table-main tr").each(function (index, val) { $(".layui-table-fixed").ea
layui table翻页滚动条位置保持不变
与其用泪水悔恨昨天，不如用汗水拼搏今天
06-24 8507
最近使用了layui table但是发现了一系列问题，由于被封装过不好自己修改，比如翻页后滑动条每次都会复位，导致体验不好，通过调试，我发现layui table并没有给div加标签，我通过class定位表格div位置。可以看到 滚动条所在div class="layui-table-body layui-table-main"我在layui table定义了一个父div,防止多个table &...
layui table 表头与表体内容错位
55555的博客
12-04 6385
问题 使用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、付费专栏及课程。

余额充值