Ant Design [Table] 如何通过点击列展开行答案

【问题标题】：Antd Design [Table] how to expand row by click in the columnAnt Design [Table] 如何通过点击列展开行
【发布时间】：2021-08-18 06:03:37
【问题描述】：

我有一个可扩展表格，其中包含提交或查看详细信息的最后一个操作列（展开更多信息）

Idk 如何在 column.render() 中制作展开函数，目前，我使用 expandRowByClick: true 来解决问题。

<Table
  expandable={{
    expandedRowRender,
    rowExpandable: (record) => record.key % 2,
    // expandIconColumnIndex:7
    expandRowByClick: true,
    expandIcon: () => <div />
    }}
  dataSource={data}
/>

但这不是答案，因为有些列呈现了链接、其他 onClick 回调或文本 More detail 应该被扩展状态（更多/更少）更改。

Antd 设计版本 4.16.0

代码沙盒：https://codesandbox.io/s/antdnestedtables-zrtuw

【问题讨论】：

标签： reactjs antd

【解决方案1】：

行单击时行扩展的原因是expandRowByClick: true。去掉它。现在，如果您想在自定义按钮上呈现该隐藏行，则需要在 Table 组件上手动设置 expandedRowKeys 属性。您可以在此处阅读更多 AntD 文档：https://ant.design/components/table/#API

现在你的情况很简单。

第一。创建一个地方来存储你用过的密钥，这必须使用像const [expended, setExpended] = useState()这样的状态来完成@

第二。创建一个在单击时添加和删除已用键的方法。注意它必须同时执行，因为当您单击expend 按钮时，它会将相同的index 发送到相同的方法。所以你必须检查它是否已经被选中。

const expend = (index) => {
    if (expended === index) setExpended(undefined);
    else setExpended(index);
};

这是一个示例，一次只能扩展 1 个。如果有更多的扩展 - 其他人将关闭，而那个人将打开。如果您想允许用户一次展开多个 - 需要重做此操作以改为使用数组。

使用onClick={() => expend(index)} 将这个新创建的方法传递给您的a 元素。注意只有当它是More details 按钮时才这样做。

第三。像这样在表格中渲染它

<Table
  className="components-table-demo-nested"
  columns={columns}
  expandable={{
    expandedRowRender,
    rowExpandable: (record) => record.key % 2,
    expandIcon: () => <></>
  }}
  expandedRowKeys={[expended]}
  dataSource={data}
/>

expandedRowRender 与您的情况一样。 expandIcon 设置为一个空片段，它的重要因为没有它，它将在左侧呈现默认的 AntD 图标。 expandedRowKeys 是扩展行的键。它必须是一个数组，因此为什么 expended 在 [] 中，因为如前所述，此示例制作时只能扩展 1 行。

结果：仅当您单击 Actions 列中的自定义 More Details 按钮时，它才会展开。此外，如果行被扩展，而不是More details，它会说Close details

这是一个活生生的例子：https://codesandbox.io/s/antdnestedtables-forked-orq20?file=/index.tsx

【讨论】：