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

Question

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

不知道如何在 column.render() 中创建扩展函数，目前，我使用 expandRowByClick: true.

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

但这不是答案，因为有些列使用 link 呈现，其他 onClick 回调，或者文本 More detail 应该由展开状态更改（More/Less).

antd设计版本4.16.0

Codesandbox：https://codesandbox.io/s/antdnestedtables-zrtuw

Answer 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 渲染它

<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

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

Antd Design [Table] how to expand row by click in the column

reactjs

antd