揭秘 Ant Design 表格的固定列错位难题：告别多余空白列！

2023-12-23 01:44:13

揭秘Ant Design 表格固定列空白列之谜：终极解决方案

问题由来：固定列的奥秘

在Ant Design 表格中使用固定列时，你可能遇到这样一个恼人的问题：当屏幕宽度超过滚动区域宽度时，固定列会呈现多余的空白列。这是为什么呢？

秘密在于Ant Design 设置固定列的内部机制。当启用固定列时，表格会从可滚动区域中扣除固定列的宽度。然而，当屏幕宽度小于可滚动区域宽度时，这不会产生问题。然而，一旦屏幕宽度超过可滚动区域宽度，扣除的固定列宽度就会缩小可滚动区域的实际宽度。

例如，假设你设置了三个固定列，每个宽度为150px，可滚动区域宽度为1000px。扣除固定列宽度后，可滚动区域的实际宽度将变为：

1000px - (150px x 3) = 700px

解决方案：调整可滚动区域宽度

为了解决多余空白列的问题，我们需要调整可滚动区域的宽度，使其与屏幕宽度一致。我们可以通过以下步骤实现：

获取表格的弹出容器： 使用getPopupContainer方法获取表格的弹出容器。
设置弹出容器的宽度： 将弹出容器的宽度设置为与屏幕宽度一致。
表格组件挂载后调用设置方法： 在表格组件挂载后，调用setPopupContainerWidth方法来调整弹出容器的宽度。

示例代码

import { Table } from "antd";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    fixed: "left",
    width: 150,
  },
  {
    title: "Age",
    dataIndex: "age",
    fixed: "left",
    width: 150,
  },
  {
    title: "Address",
    dataIndex: "address",
    width: 300,
  },
  {
    title: "Email",
    dataIndex: "email",
    width: 200,
  },
];

const data = [
  {
    key: 1,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    email: "john.brown@example.com",
  },
  {
    key: 2,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Street",
    email: "jim.green@example.com",
  },
  {
    key: 3,
    name: "Joe Black",
    age: 32,
    address: "Sydney No. 1 Road",
    email: "joe.black@example.com",
  },
];

const App = () => {
  const getPopupContainer = () => {
    return document.querySelector(".ant-table-fixed-right");
  };

  const setPopupContainerWidth = (width) => {
    const popupContainer = getPopupContainer();
    if (popupContainer) {
      popupContainer.style.width = `${width}px`;
    }
  };

  useEffect(() => {
    const screenWidth = window.innerWidth;
    setPopupContainerWidth(screenWidth);
  }, []);

  return (
    <Table
      columns={columns}
      dataSource={data}
      scroll={{ x: 1000 }}
    />
  );
};

export default App;