是否可以自定义标题列以扩展antd表中的按钮？

Question

我知道如何在 antd Table 中展开和折叠行。我知道如何展开全部或全部折叠，只要该按钮位于表格本身之外。我不知道如何将该功能放入表格的标题中。即那个绿色突出显示在哪里，我希望我的“全部展开”按钮是。我没有看到它是内置的，也没有看到如何修改该列标题。

Answer 1

这是可能的，但它要求您必须利用外部状态来跟踪扩展键，以及构建自己的可扩展列。如果您不想“重复”扩展控制列，您还必须隐藏它们的可扩展列。此外，您会失去他们的展开图标上的动画，如果您想模仿他们的行为，您必须自己构建。这是一个最小的可行示例。

const MyCustomTable = ({expandable, columns, dataSource, ...rest}) => {
  const [expandedKeys, setExpandedKeys] = useState([]);

  const allAvailableKeys = dataSource.map(e => e.key)
  const processedColumns = [...columns]
  processedColumns.unshift({
    title: allAvailableKeys.every(e => expandedKeys.includes(e)) ? (
      <MinusSquareOutlined onClick={() => collapseAll()} />
    ) : (
      <PlusSquareOutlined onClick={() => expandAll()} />
    ),
    key: "expand",
    render: (_, record) => expandedKeys.includes(record.key) ? (
      <MinusSquareOutlined onClick={() => toggleExpandedKeys(record.key)} />
    ) : (
      <PlusSquareOutlined onClick={() => toggleExpandedKeys(record.key)}/>
    )
  });

  const toggleExpandedKeys = key => {
    setExpandedKeys(prev => {
      const outArr = [...prev];
      if (outArr.includes(key)) {
        return outArr.filter(e => e !== key);
      } else {
        outArr.push(key);
        return outArr;
      }
    })
  }

  const expandAll = () => {
    setExpandedKeys(allAvailableKeys)
  }

  const collapseAll = () => {
    setExpandedKeys([])
  }

  return (
    <Table
      columns={processedColumns}
      dataSource={dataSource}
      expandable={{
        ...expandable,
        expandedRowKeys: expandedKeys,
        expandIconColumnIndex: -1
      }}
      {...rest}
    />
  )
}

在行动中看到它here