使用layui table固定列失效

最近做项目,前端表格由原先的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固定列失效_第1张图片发现是 .layui-table-fixed的z-index的问题,z-index设置为999,固定列就出来了,后面是根据自己的页面调试layui-table-fixed的top设置为0和layui-table-fixed-r的right设置为0。

这个bug我找了很久才解决了[捂脸]。

最后说一句,我是版本的问题,踩坑不易,如果有帮到你,记得点赞哦!

你可能感兴趣的:(前端jquery)