最近做项目,前端表格由原先的DataTables改为layui Table,在使用layui Table的固定列时,固定列失效。
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/demo/table/user/'
,width: 892
,height: 330
,cols: [[
{type:'checkbox', fixed: 'left'}
,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', width: 219, title: '签名'}
,{field:'experience', width:80, title: '积分', sort: true}
,{field:'score', width:80, title: '评分', sort: true}
,{field:'classify', width:80, title: '职业'}
,{field:'wealth', width:120, title: '财富', sort: true, fixed: 'right'}
]]
,page: true
});
最重要的一点是我的layui版本
百度搜索的答案大概如下
其中layui-hide的值为
.layui-hide {
display: none!important;
}
于是在css文件中进行了改写
.layui-table-fixed .layui-table-body {
height: auto!important;
}
.layui-table-fixed.layui-hide {
display: block!important;
}
我设置以上样式还是没有效果,后来我检查Table样式,
发现是 .layui-table-fixed的z-index的问题,z-index设置为999,固定列就出来了,后面是根据自己的页面调试layui-table-fixed的top设置为0和layui-table-fixed-r的right设置为0。
这个bug我找了很久才解决了[捂脸]。
最后说一句,我是版本的问题,踩坑不易,如果有帮到你,记得点赞哦!