Antd动态表格如何通过列键实现表头点击删除列功能？

要实现点击表头关闭按钮移除对应列，核心是把当前列的key传递给EditableCell组件，具体步骤如下：

1. 传递列key到EditableCell #

Ant Design的Table自定义表头单元格时，header.cell函数会接收包含当前列信息的参数，从中可以拿到column.key。修改Table的components配置：

<Table
    columns={columns}
    components={{
      header: {
        // 接收cell组件的参数，解构出column
        cell: ({ column }) => (
          <EditableCell
            handleRemoveColumn={handleRemoveColumn}
            columnKey={column.key} // 传递当前列的key
          />
        ),
        row: EditableRow,
      },
    }}
    dataSource={datasource}
    tableLayout="fixed"
    style={{ flex: "auto", maxWidth: "96.3%" }}
    scroll={{ x: "auto" }}
    bordered
    pagination={false}
  />

2. 在EditableCell中使用columnKey移除对应列 #

修改EditableCell组件，使用传入的columnKey作为移除标识：

function EditableCell({ handleRemoveColumn, columnKey }: TChildProp) {
  return (
    <th style={{ padding: "0px 6px 0px 0px" }}>
      <Form.Item style={{ margin: "4px" }}>
        <Space.Compact block={true}>
          <Input
            placeholder="Title"
            style={{
              margin: "4px 3px",
              minWidth: "132px",
              width: "100%",
              backgroundColor: "#F2F3F5",
            }}
            bordered={false}
            allowClear
          />
          <CloseOutlined
            style={{ cursor: "pointer", marginLeft: "4px" }}
            onClick={() => handleRemoveColumn(columnKey)} // 使用传入的columnKey
          />
        </Space.Compact>
      </Form.Item>
    </th>
  );
}

3. 实现handleRemoveColumn函数 #

在父组件中，通过过滤columns数组移除对应key的列（假设columns是用useState管理的）：

const [columns, setColumns] = useState([/* 初始列配置，每列必须有唯一key */]);

const handleRemoveColumn = (key) => {
  // 过滤掉key匹配的列
  setColumns(prevColumns => prevColumns.filter(col => col.key !== key));
};

注意事项 #

• 确保你动态添加的每一列都有唯一的key值，这是Antd Table的要求，也是正确移除列的前提。
• 如果你的列配置中没有key，可以用dataIndex作为替代（前提是dataIndex也是唯一的），但推荐始终给每列设置独立的key。

内容的提问来源于stack exchange，提问作者KwanYee Tan