1. 说明

这个组件是我这个小卡拉很认真的写的，但肯定存在着不足，接受大佬们的指导，然后我偷偷改正🤣。

就是修改其组件的样式历程就是：弹性布局、设置高度就这样他就是实现，很懵但是实现感觉就完事了赶紧记下来到时候需要的时候我可以随时上路。

还有这个是基于 React 项目的

2. 实现

不多哔哔赖赖直接上代码了

我是拆分成组件了在 src\components 中我新建了 customTable 文件夹里面就写这个组件

index.tsx

/**
 * @description 定制化 ProTable 组件，会根据父元素高度合理的产生滚动条
 */

import { ProTable, ProTableProps } from '@ant-design/pro-components';
import { TableProps } from 'antd';
import styles from './index.less';

const CustomTable = (props: ProTableProps<any, TableProps, 'text'>) => {
  const { style, cardProps, tableStyle, tableClassName, scroll, ...rest } =
    props || {};

  return (
    <ProTable
      tableClassName={`${styles['custom-pro-table-by-customs']} ${tableClassName}`}
      scroll={{ y: 'max-content', ...scroll }}
      style={{
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        ...style,
      }}
      cardProps={{
        style: {
          flex: 1,
          overflow: 'hidden',
        },
        bodyStyle: {
          display: 'flex',
          flexDirection: 'column',
        },
        ...cardProps,
      }}
      tableStyle={{
        flex: 1,
        overflow: 'hidden',
        ...tableStyle,
      }}
      {...rest}
    />
  );
};

export default CustomTable;

index.less

.custom-pro-table-by-customs {
  :global {
    .ant-spin-nested-loading {
      height: 100%;
      .ant-spin-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        .ant-table {
          flex: 1;
          overflow: hidden;
          .ant-table-container {
            height: 100%;
            display: flex;
            flex-direction: column;
            .ant-table-body {
              flex: 1;
            }
          }
        }
      }
    }
  }
}

3. 使用

import CustomTable from '@/components/customTable';
import { ProColumns } from '@ant-design/pro-components';
import { Col, InputNumber, Row, Slider } from 'antd';
import React, { useState } from 'react';

const MyTable: React.FC = () => {
  const [inputValue, setInputValue] = useState(400);

  const onChange = (newValue: number) => {
    setInputValue(newValue);
  };

  const columns: ProColumns<any>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
  ];

  return (
    <div>
      <Row>
        <Col span={12}>
          <Slider
            min={400}
            max={800}
            onChange={onChange}
            value={typeof inputValue === 'number' ? inputValue : 0}
          />
        </Col>
        <Col span={4}>
          <InputNumber
            min={400}
            max={800}
            style={{ margin: '0 16px' }}
            value={inputValue}
            onChange={onChange}
          />
        </Col>
      </Row>
      <div style={{ height: inputValue }}>
        <CustomTable
          columns={columns}
          dataSource={Array.from({ length: 100 }, (v, i) => i + 1)?.map(
            (i: number) => ({
              title: i > 9 ? String(i) : '0' + i,
              value: 0,
            }),
          )}
        />
      </div>
    </div>
  );
};

export default MyTable;

效果图

至此就完成了这个组件。

4. 最后

有什么问题大佬们也可以指出，毕竟有问题肯定要解决的，这样才能成长。