如何动态设置antd Table的最小高度

在 Ant Design 的 Table 组件中，如果你希望动态设置 .ant-table 的 min-height 属性，并且这个值可以根据变量动态修改，可以通过以下几种方法实现：

方法 1：使用 style 属性动态注入样式

你可以通过 React 的 style 属性动态设置表格的样式。例如：

import React from "react";
import { Table } from "antd";

const MyTable = () => {
  const minHeight = 352; // 动态变量，可以根据需要修改
  const columns = [
    // 定义你的列
  ];
  const dataSource = [
    // 定义你的数据源
  ];

  return (
    <div
      className="ant-table"
      style={{ minHeight: `${minHeight}px` }}
    >
      <Table columns={columns} dataSource={dataSource} />
    </div>
  );
};

export default MyTable;

这种方法通过直接在 div 上设置 style 属性，动态地将 minHeight 的值传递给 .ant-table。

方法 2：使用 CSS-in-JS 动态生成样式

如果你使用了 CSS-in-JS 库（如 styled-components 或 emotion），可以更灵活地动态生成样式。例如，使用 styled-components：

import React from "react";
import { Table } from "antd";
import styled from "styled-components";

const TableWrapper = styled.div`
  .ant-table {
    min-height: ${({ minHeight }) => `${minHeight}px`};
  }
`;

const MyTable = () => {
  const minHeight = 352; // 动态变量
  const columns = [
    // 定义你的列
  ];
  const dataSource = [
    // 定义你的数据源
  ];

  return (
    <TableWrapper minHeight={minHeight}>
      <Table columns={columns} dataSource={dataSource} />
    </TableWrapper>
  );
};

export default MyTable;

这种方法通过 styled-components 的动态插值功能，将 minHeight 的值传递到 .ant-table 的样式中。

方法 3：使用全局样式动态注入

如果你希望全局设置 .ant-table 的样式，并且样式值是动态的，可以通过 React 的 useEffect 和 document API 动态注入样式：

import React, { useEffect } from "react";
import { Table } from "antd";

const MyTable = () => {
  const minHeight = 352; // 动态变量

  useEffect(() => {
    // 动态插入样式
    const style = document.createElement("style");
    style.innerHTML = `
      .ant-table {
        min-height: ${minHeight}px !important;
      }
    `;
    document.head.appendChild(style);

    // 清理样式
    return () => {
      document.head.removeChild(style);
    };
  }, [minHeight]);

  const columns = [
    // 定义你的列
  ];
  const dataSource = [
    // 定义你的数据源
  ];

  return <Table columns={columns} dataSource={dataSource} />;
};

export default MyTable;

这种方法通过在 document.head 中动态插入样式，确保 .ant-table 的样式可以全局生效，并且值是动态的。

方法 4：使用 CSS 变量

如果你的项目支持 CSS 变量，可以通过 CSS 变量动态设置样式。例如：

import React from "react";
import { Table } from "antd";

const MyTable = () => {
  const minHeight = 352; // 动态变量

  const columns = [
    // 定义你的列
  ];
  const dataSource = [
    // 定义你的数据源
  ];

  return (
    <div
      style={{ "--table-min-height": `${minHeight}px` }}
      className="table-container"
    >
      <Table columns={columns} dataSource={dataSource} />
    </div>
  );
};

export default MyTable;

在 CSS 中：

.table-container .ant-table {
  min-height: var(--table-min-height);
}

这种方法通过 CSS 变量将动态值传递到样式中，同时保持了样式的可维护性。

总结

根据你的需求和项目架构，可以选择以下方法之一：

1. 直接使用 style 属性：简单直接，适合局部样式。
2. 使用 CSS-in-JS：适合需要更灵活的样式管理。
3. 动态注入全局样式：适合需要全局生效的场景。
4. 使用 CSS 变量：适合项目支持 CSS 变量的情况。

选择最适合你项目的方式即可！