layui制作表格，如何将表格部分固定？

Question

当表格过长时，向右拉动滚动条，左侧3列固定不动，
向下拉动滚动条时，上方三列固定不动
，列固定不动，我会，但是向下拉动，上方固定该如何做

Answer 1

可以使用layui的table模块中的固定列和固定表头功能来实现表格部分固定。具体操作如下：

1. 引入layui的table模块：

<script src="layui/layui.js"></script>

1. 使用table.render方法渲染表格，并设置固定列和固定表头：

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo',
    url: '/demo/table/user/',
    cols: [[ //表头
      {type: 'checkbox'},
      {field: 'id', title: 'ID', width: 80},
      {field: 'username', title: '用户名', width: 120},
      {field: 'email', title: '邮箱', minWidth: 150},
      {field: 'sex', title: '性别', width: 80, sort: true},
      {field: 'city', title: '城市', width: 100},
      {field: 'sign', title: '签名', minWidth: 200},
      {field: 'experience', title: '积分', width: 80, sort: true},
      {field: 'score', title: '评分', width: 80, sort: true},
      {field: 'classify', title: '职业', width: 100},
      {field: 'wealth', title: '财富', width: 135, sort: true},
      {fixed: 'right', title: '操作', toolbar: '#barDemo', width:150}
    ]],
    page: true,
    height: 315,
    limit: 5,
    limits: [5,10,15],
    done: function(res, curr, count){
      // ...
    }
  });
  
  //固定列和固定表头
  table.on('renderComplete(demo)', function(){
    var $table = $('.layui-table-view'),
        $fixed = $table.find('.layui-table-fixed');
    $table.css('width', '100%');
    $fixed.css('position', 'fixed');
    $fixed.find('.layui-table-header').css('overflow', 'visible');
    $fixed.find('.layui-table-body').css('overflow', 'auto');
    $fixed.find('.layui-table-body table').css('width', '100%');
  });
});

其中，cols为表头，使用fixed属性可以将列固定在左边或右边。在渲染完成后，可以通过table.on方法来添加renderComplete事件，在该事件中将固定列和固定表头的样式设置为fixed即可。

另外，需要给表格设置一个高度，才能出现滚动条。