tnblog
首页
视频
资源
登录

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

6241人阅读 2019/7/30 18:36 总访问:6241 评论:1 收藏:0 手机
分类: 个人总结

对于layui,大家都用过吧:轻量级框架,使用方便,快捷,入手难度小,但是这些优点就不代表你没有踩到它的坑。

目前遇到一个问题,搞得焦头烂额的,也问了很多的人,度娘也是无能为力。

先来几张图吧:

    

第一:滚动条在固定列的上面---固定列方法:fixed: 'right' ,固定在表格右边

问题: 改变表格高度后--上,下拉动或者放大缩小页面或者页面过小后,滚动条被固定列覆盖,表格前后不对应-错位现象出现

如:


原因分析:1,固定列与原表格呈现的是:兄弟关系而不是子集关系

2:然而两个div中都有 ayui-table-body 这样一个属性,导致在改变高度的时候整个表格和固定列的高度是一样的

    但是并不能一样,因为有滚动条的原因:滚动条占高17px,滚动条占了表格高,却没有占据固定列的高,所以就覆盖了滚动条-----------------此情况只在有滚动条的情况下,没有滚动条则不管,因为不会错位

3:办法:在处理表格高度的同时也要处理固定列的高度(相差一个滚动条的高度--17px);


4:另外:判断是否滚动条--jqury写法

function hasScrollbar() { 
   return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}


js:只需将

document.body 换成你的元素的即可 ; 注:js获取元素需要加上[0],指明是哪一个具体元素



评价

剑轩

2019/7/30 21:08:11

样式问题有时间是个很坑的问题

layui水平二级菜单时长不显示的问题

调用一下初始化方法Init就可以解决了

layui 表单模块常见问题

layui 设置select宽度直接设置select外层的宽度就行,layui的select会自适应宽度layui 设置select会被百度编辑器挡住问题是...

layui Select添加选择事件layui 下拉列表

html<selectname="label"id="atype"lay-filter="atype"> <optionvalue="a&q...

layui布局

Layui 使用layui-container container来指明一个容器版本<divclass="layui-containercontainer"style="b...

layuia 图标

图标的官方地址:https://www.layui.com/doc/element/icon.html

layui水平布局

一个layui-input-inline即可 <divclass="layui-input-inline"> </div> <divclass="layui...

layui插件上传图片具体步奏以及获取图片地址

注意事项: (1)在使用插件之前需要引入该插件文件包不可分开使用。 (2)在运行过程中会出现报一个错误(上传图片异常等等...

layui+过滤器 实现权限管理

想要做好一个权限管理并不简单,不管是数据库还是逻辑上都还是有一点复杂的 下面开始讲解我们的权限管理首先创建数据库《规...

layui 弹窗遮罩层把弹窗挡住问题

代码:layer.open({ type:1, area:["300px","300px"], content:$("#addvieww") });分析...

layui 报错 l.push is not a function

解决方法:layui.use(['jquery','layer','element'],function(){ } 而不是 layui.use(&#39...

layer loading。layui 菊花

layer loading层很简单,起到一个遮罩提示加载的效果打开://loading层 varlayerIndex=layer.load(1,{ shade:[0.1,'#...

layui Tab菜单添加点击事件

layui 实现Tab菜单很简单使用下面的代码即可<divclass="layui-tab"lay-filter="test1"> <ul...

使用vue渲染layui的复选框时无法渲染

这是因为使用vue后数据是动态生成的,没有被layui渲染出来所以有问题,调用一下layui的渲染方法即可layui.use(['form&#...

vue+layui默认选中第一个tab

可以利用v-for中的index,然后使用一个三目运算即可<ulclass="layui-tab-title"> <liv-for="(item...

layui tab切换更改同一个内容

layui tab切换时如何更改同一个内容呢,不用一个tab对应一个内容,就相当于改变同一个内容,其实很简单就是只留layui-tab-c...
没有个性,不需要签名
排名
94
文章
1
粉丝
1
评论
1
layui 固定列覆盖滚动条,导致表格错位
剑轩 : 样式问题有时间是个很坑的问题
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术