layui 在layer弹框中渲染数据表格，表头对不齐问题

最新推荐文章于 2024-02-21 14:01:33 发布

原创

最新推荐文章于 2024-02-21 14:01:33 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui

本文介绍了在使用layui库时遇到的layer弹窗内数据显示表格表头对齐问题，提供了具体的解决方案。

此问题在type为1的页面层常见

解决方案：
在弹窗成功的回调中渲染表格

layer.open({
   
   
　　type: 1,
　　content:  $("#id"), //弹框中的dom元素
　　area: ['250px','100px']

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大盗缘来是你

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

LayUi前端框架用法讲解--渲染Table数据表格

DCFANS的博客

06-12

6751

LayUi渲染Table数据表格，效果图如下：如图，这是一个LayUi的Table页面，接下来详细讲解一下，怎么渲染出来Table数据表格的。先放一下完整版的代码，然后慢慢分析： <!DOCTYPE html> <html> <head th:include="common/header::commonHeader"> <!-- <meta...

解决layui 数据表格固定列与表格不对齐，高度不一致

hu104160112的博客

02-04

7001

大家可能遇到过这种情况，表格的固定列高度和表格不一样原因：表头或者标题数据换行，导致高度不一致解决：在表格的done 回调中 done: function (index, layero) { //表头部分 //动态监听表头高度变化，冻结行跟着改变高度 $(".layui-table-header tr").resize(function () { $(".layui-table-header tr").each(function

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

不正经的kimol君 2021.01.10
谢谢分享，很有用

layui表头与内容不对齐问题

Valar_Morghul1s的博客

11-09

1445

解决一种layui表头列与内容列不对齐的问题

Layer表格汇总（所有）数据根据配置动态显示

夏已微凉、

07-03

1108

目录一、描述二、环境三、讲解1、汇总数据计算2、页面处理四、代码1、PHP根据动态配置返回汇总数据2、页面处理1、把$config处理成前端需要的格式2、把值`$result`传到页面3、html中动态显示标签4、赋值一、描述看标题大家可能云里雾里，这里解释下：就是一个页面有一个表格（分页的），表格上面有一行，是对表格金额字段的汇总（所有数据汇总，不是汇总当前页），但是这个金额的类型是不固定的（从配置读取），未来还会增加金额类型。二、环境操作系统 Win10 Layui版本 2.4.5 查看L

layui 表格渲染后表头与表体边框线错位不对齐（已解决）

最新发布

zf2451597310的博客

02-21

1365

以上两种问原因都试了也没有找到原因所在，后来我又认真的看了一下我的样式代码，发现在layui.css文件中有一个border-left：none；的属性取消后样式正常。1.有的说是因为表格渲染的时候有多余逗号，但是我检查我的代码后并没有发现；2.有的说是因为右侧的滚动条宽度产生的，但是我的数据很少并没有出现滚动条；由图可见，并不是很大的错位，只是一小部分没有对齐。

通过layer弹出层获取数据，渲染到页面里表格中

weixin_49222645的博客

12-24

1691

通过layer弹出层获取数据，渲染到页面里表格中效果如下图 html部分  <script type="text/html" id="modal"> <div id="popup-userInfo" style="overflow: hidden;"> <div class="m_item"> <span class="require" style="width: 10%;">

Layui表格行工具事件与数据回填方法

10-16

Layui是一款基于jQuery的前端UI框架，它由多个模块组成，包括但不限于表格(table)、表单(form)、弹框(layer)等组件。它简化了前端的开发过程，使得开发者可以更加方便快捷地构建具有优美界面的网页应用。本文将深入...

JavaWeb——LayUi 数据表格局部刷新问题 2021-12-01

weixin_45803109的博客

12-01

6533

LayUi前端框架数据表格：layui下拉框渲染问题及回显问题

layui里面layer弹窗渲染layerdate,时间控件不出现，闪现问题，F12才出来

雷绍发

04-19

7905

直接说解决办法吧！排除法，首先看type类型首先说第一种 layer.open({ type: 1, content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 }); 这种基本不会出现高度问题，一般出现这种情况就是冒泡，虽然都知道冒泡但是这里也是可能会遇到2种情况的， 1：通过按钮或者...

layUI中table表格表头与内容错位

qq_40814139的博客

03-06

8242

在使用layUI框架展示数据时，加了checkbox之后表头与内容出现错位（注意：没加checkbox时，没有出现错位。），如下图：对应的代码如下：不是其他人说的那样什么多了个逗号，而是由于其中有一列设置display:none,而宽度设置为0，我把宽度改为80就解决问题了。修改后的页面： ...

layui table表头表行对不齐的问题

热门推荐

iTrice的博客

12-24

1万+

初次使用layui table遇到的一个问题，表头和行对不齐。原因如下：

layui 表格固定列覆盖滚动条导致表格错位

某人的小猫

07-30

6863

对于layui，大家都用过吧：轻量级框架，使用方便，快捷，入手难度小，但是这些优点就不代表你没有踩到它的坑。目前遇到一个问题，搞得焦头烂额的，也问了很多的人，度娘也是无能为力。先来几张图吧：第一：滚动条在固定列的上面---固定列方法：fixed: 'right' ，固定在表格右边问题：改变表格高度后--上，下拉动或者放大缩小页面或者页面过小后，滚动条被固定列覆盖，表格...

原来layUI表头和表单内容不能对齐的竟是因为……

比起未来可期，我更喜欢如约而至

04-20

1266

错误的效果是这样，debug半天，原来罪魁祸首竟是这个籍籍无名的","，所以一定要认真认真啊，上午由于一个URL中多一个空格，师兄都帮我找了很久的，原来错在多了一个空格。。。原因就在这里，多了一个逗号诺，这就是正确的样式呐最近手头加班干活，记录一下自己的心得，不对的烦请各位看官指正~ ...

layui表头和内容不能对齐

未来的博客

04-03

3107

遇见了一个问题，使用layui table方法渲染时出现了个莫名其妙的错误。内容和字段名不能对齐。正常的是这样：却展示成了这样：字段没对齐，找了半天原因发现是在table.render中的cols参数多了一个"," 不细心一点真看不出来。正常的应该是这样：错误示范：一定要主要第一个field前面不能加","号 ...

layui弹框中显示渲染模板。

qq_41856825的博客

08-22

908

格式如下 <script type="text/html" id="showArticle"></script> //模板引擎 layui.use([ "laytpl "], function () { var laytpl = layui.laytpl; var getTpl = showArticle.innerHTML; //showArticle 为模板id laytpl(getTpl).render({ data:data]}, function

Layui表格渲染错位

weixin_43858776的博客

05-25

1650

检查自己是不是多了","。

layui table表格表头与内容列错位问题（只有纵向滚动条的情况）

dljm328963024的博客

06-25

7037

版本2.4.5 问题展示：存在问题：正好错位一个纵向滚动条的宽度思路：仔细观察th元素及th包裹的子元素div 如下图发现th宽度莫名的就多了5px 我就纳闷了解决方案：到table.js源码中→搜索 →纵向滚动条宽度，找到了，并按下图修改解决了解决后效果如下转载于:https://www.cnblogs....

使用layui流加载，CSS解决如何固定表头，以及解决表格表头和表格内容对不齐问题

wr793455561的博客

10-15

9554

先上HTML部分的代码： <table class="layui-table"> <thead class="top-head"> <tr> @for(var item in zkColumnDescs){ @if(item.field != 'equipId'){ <th class=...