探索Ant Design Table组件中onCell不展示嵌套数据的原因及解决方案

99次阅读

共计 1579 个字符，预计需要花费 4 分钟才能阅读完成。

Ant Design，作为 React 的一个非常受欢迎的 UI 库，以其丰富的组件和优雅的设计风格，被广大开发者所喜爱。其中，Table 组件由于其强大的功能和灵活性，成为了展示数据的不二之选。然而，正如任何强大的工具一样，它也带来了一些挑战。本文将深入探讨在使用 Ant Design 的 Table 组件时，onCell方法不展示嵌套数据的原因，并提供相应的解决方案。

首先，让我们通过一个简单的例子来重现这个问题。假设我们有一个用户列表，每个用户都有一个地址对象，我们想要在表格中展示用户的地址信息。

“`javascript
const dataSource = [
{
key: ‘1’,
name: ‘ 张三 ’,
age: 32,
address: {
city: ‘ 北京 ’,
street: ‘ 长安街 ’,
number: 100
}
},
// … 其他数据
];

const columns = [
{
title: ‘ 姓名 ’,
dataIndex: ‘name’,
key: ‘name’,
},
{
title: ‘ 年龄 ’,
dataIndex: ‘age’,
key: ‘age’,
},
{
title: ‘ 地址 ’,
dataIndex: ‘address’,
key: ‘address’,
onCell: (record) => ({
record,
dataIndex: ‘address’,
title: ‘ 地址 ’,
children: (

{record.address.city}, {record.address.street}, {record.address.number}

),
}),
},
// … 其他列
];
“`

在这个例子中，我们期望在 地址 列中展示用户的完整地址信息。然而，实际运行时，我们会发现 onCell 中的 children 并没有被渲染出来。

这个问题的主要原因是 Ant Design Table 组件在处理 onCell 时的一个已知问题。默认情况下，Table 组件会尝试直接渲染 dataIndex 指定的字段。如果这个字段是一个对象或数组，它将无法正确渲染，因为它不知道如何展示复杂的数据类型。

为了解决这个问题，我们可以采用几种不同的方法：

使用 render 方法 ：我们可以为address 列添加一个 render 方法，来手动渲染单元格内容。

javascript { title: '地址', dataIndex: 'address', key: 'address', render: (text, record) => ( <div> {record.address.city}, {record.address.street}, {record.address.number} </div> ), },

使用 onCell 的正确方式 ：我们可以在onCell 中返回一个 children 节点，但需要确保 onCell 的返回值是一个对象，并且这个对象包含一个 children 属性，这个属性是一个 React 节点。

javascript { title: '地址', dataIndex: 'address', key: 'address', onCell: (record) => ({ children: ( <div> {record.address.city}, {record.address.street}, {record.address.number} </div> ), }), },