Antd Table自适应页面剩余高度

时间：2025-01-20 20:13:14

1、功能

a、自动占满页面剩余高度
b、改变浏览器窗口时自动适应剩余高度不出现外部滚动条

2、代码

//
import { useEffect, useState } from 'react';
import debounce from 'lodash/debounce';
export function useGetResizeHeight(name: string) {
    //设置撑高表格外部包裹元素的高度
    const [tableHeight, setTableHeight] = useState(500);

    useEffect(() => {
        handleGetTableHeight();
        //窗口resize防抖
        const debounced = debounce(handleGetTableHeight, 200);
        ('resize', debounced);
        //卸载组件时解除对resize的监听
        return () => ('resize', debounced);
    }, []);

    const handleGetTableHeight = () => {
        setTimeout(() => {
            let height = (name)!.clientHeight;
            height = height - 55 - 46 - 6; //55-表头高度，46-分页组件高度，6-微调高度
            setTableHeight(height);
        });
    };

    return [tableHeight];
}

//
import React from 'react';
import { Table } from 'antd';
import { TableProps } from 'antd/lib/table';
import { useGetResizeHeight } from './hook/useGetResizeTable';
import styles from './';

/**
 * 自适应高度表格
 * @功能
 * 1、自动占满页面剩余高度
 * 2、改变浏览器窗口时自动适应剩余高度不出现外部滚动条
 * @前提 页面自身设置的有高度，而非根据子元素撑开高度
 * @使用方法
 * 1、安装lodash--yarn add lodash，仅使用里面的防抖方法
 * 2、在需要使用的地方导入--import ResizeTable from '@/components/ResizeTable/ResizeTable'
 * 3、使用--<ResizeTable api和antd的Table一样/>
 * @demo
 * import ResizeTable from '@/components/ResizeTable/ResizeTable';
 * const Demo = () => {
 *     return (
 *         <div style={{height: '900px', display: 'flex'}}>
 *             查询条件
 *             <Form .../>
 *             自适应表格
 *             <ResizeTable
 *                  rowKey="id"
 *                  columns={columns}
 *                  dataSource={data}
 *                  pagination={{
 *                      total: total,
 *                      current: ,
 *                      pageSize: ,
 *                 }}
 *         </div>
 *     )
 * }
 * @author GuanJ
 */
const ResizeTable = <RecordType extends object = any>(props: TableProps<RecordType>) => {
    const [tableHeight] = useGetResizeHeight('resize-table');

    let tableProps: TableProps<RecordType> = {
        ...props,
        scroll: {
            y: tableHeight,
        },
    };
    if (props &&  && ) {
        !.x = ;
    }

    return (
        <div className={}>
            <div  className={}>
                <Table<RecordType> {...tableProps} />
            </div>
        </div>
    );
};

export default ResizeTable;

//
.tableWrap {
    position: relative;
    flex: 1;

    //使用absolute原因在于，窗口resize时，可以即时获取窗口高度
    //仅用flex无法做到
    .table {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        :global {
            //翻页部分
            .-pagination {
                margin: 16px 0 0;
            }

            //表头不换行
            .ant-table-thead > tr > th {
                white-space: nowrap;
            }
        }
    }
}

3、前提

a、父元素自身设置的有高度，而非根据子元素撑开高度
b、父元素设置dispaly: flex

4、使用方法

a、安装lodash--yarn add lodash，仅使用里面的防抖方法
b、在需要使用的地方导入--import ResizeTable from '@/components/ResizeTable/ResizeTable'
c、使用--<ResizeTable api和antd的Table一样/>，参考Table文档即可

相关文章