react监听容器宽度变化，动态计算ant-design table列宽

 在 Ant Design 的 <Table> 组件中，通过 动态计算列宽 来实现：

1. 3列动态宽度（其中两列等宽，另一列单独计算）。

2. 1列固定宽度（或按需调整）。

3. 保证 ellipsis 生效（需设置 width 为像素值）。

实现步骤

    1. 监听容器宽度，动态计算列宽

    使用 ResizeObserver 或 useEffect + resize 事件监听表格容器宽度，按比例分配列宽。

    2. 列宽分配逻辑

    假设表格结构如下：

• 列1（动态等宽，占剩余宽度的 40%）

• 列2（动态等宽，占剩余宽度的 40%）

• 列3（动态不等宽，占剩余宽度的 20%）

• 列4（固定宽度，如 200px）

import { Table } from "antd";
import { useEffect, useRef, useState, useMemo } from "react";

const FixedWidthTable = () => {
  const tableRef = useRef(null);
  const [columnWidths, setColumnWidths] = useState({
    col1: 200,
    col2: 200,
    col3: 150,
    col4: 100,
  });

  useEffect(() => {
    const updateColumnWidths = () => {
      if (!tableRef.current) return;
      const containerWidth = tableRef.current.offsetWidth;

      setColumnWidths({
        col1: Math.floor(containerWidth * 0.3), // 取整
        col2: Math.floor(containerWidth * 0.3), // 取整
        col3: Math.floor(containerWidth * 0.2), // 取整
        col4: 200, // 固定值
      });
    };

    updateColumnWidths();
    window.addEventListener("resize", updateColumnWidths);
    return () => window.removeEventListener("resize", updateColumnWidths);
  }, []);

  const columns = useMemo(
    () => [
      {
        title: "列1（30%）",
        dataIndex: "field1",
        ellipsis: true,
        width: columnWidths.col1, // 整数宽度
      },
      {
        title: "列2（30%）",
        dataIndex: "field2",
        ellipsis: true,
        width: columnWidths.col2, // 整数宽度
      },
      {
        title: "列3（20%）",
        dataIndex: "field3",
        ellipsis: true,
        width: columnWidths.col3, // 整数宽度
      },
      {
        title: "列4（固定）",
        dataIndex: "field4",
        width: columnWidths.col4,
      },
    ],
    [columnWidths]
  );

  return (
    <Table columns={columns} ref={tableRef} />
  );
};