固定表头

场景描述

表格数据多导致页面出现滚动条时，希望表格的表头固定，不随着页面的滚动而滚动，效果如下图所示

实现思路

表格组件的滚动项属性中支持将表格元素的tableLayout设置为固定(fixed)布局，纵向滚动高度属性设置为具体的带px的固定值，实现表头固定的效果。

实际中，数据区的高度可能不是固定的，而是充满的，这种情况通过表格组件的表格元素的tableLayout、纵向滚动高度属性和自定义css和页面组件的自动充满实现。

实现步骤

1.页面组件的自动充满设置为true

2.页面中使用布局组件，实现上中下布局，上下区域固定，中间区域充满

3.在布局组件的中间区域添加表格组件，设置表格元素的tableLayout属性为“固定”，横向滚动宽度为100%，纵向滚动高度为“真”，如下图所示

4.自定义css样式

在页面的css文件或者在公共样式文件中添加下面的样式，其中38px是表格表头的高度。表格有三种大小，这是小表格表头的高度，其它两种表格表头的高度可以在浏览器中使用开发人员工具测量

.c-full{
    height:100% !important;

    :global{
        .ant-layout{
            height:100%;
            background: #fff !important;
        };
        .ant-layout-header {
            line-height: 32px !important;
            background: #fff !important;
            height: auto !important;
            padding: 0 !important;
        };
        .ant-layout-footer {
            background: #fff !important;
            padding: 0 0 2px !important;
        };
        .ant-table-wrapper,
        .ant-table-container,
        .ant-spin-nested-loading,
        .ant-spin-container,
        .ant-table {
            height: 100%;
        };
        .ant-table-body {
            height: calc(100% - 38px) !important;
        };
        .ant-pagination.x-pagination {
            padding: 10px 0 2px;
        };
    }
}

5.在页面page上添加样式名c-full

6.在布局组件的头部区域放工具栏组件，在底部区域放分页组件，即可实现最上面效果图的效果