介绍
今天我们学习一下如何在Ant Design的Table组件中使用动态Columns，也就是说列的定义不是固定的，而是根据某些条件动态生成的。这在实际开发中非常常见，比如根据用户权限来决定显示哪些列，或者根据数据的不同类型来显示不同的列。
动态显示/隐藏某些列
考虑下面的需求，我们有一个页面，包含两个tab，一个是我的报告，另一个是所有报告。在我的报告中，我们只需要显示报告的标题和创建时间，而在所有报告中，我们需要显示更多的信息，比如作者等。- 由于我的报告中作者就是我，所以不需要显示作者列。
首先我们定义所有的列，然后根据当前tab的不同来显示或隐藏作者列。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| const columns = [
{
title: '标题',
dataIndex: 'title',
},
{
title: '创建时间',
dataIndex: 'createdAt',
},
{
title: '作者',
dataIndex: 'author',
},
];
const getColumns = (tab: 'myReports' | 'allReports') => {
if (tab === 'myReports') {
return columns.filter(col => col.dataIndex !== 'author');
}
return columns;
};
return (
<Tabs defaultActiveKey="myReports">
<TabPane tab="我的报告" key="myReports">
<Table columns={getColumns('myReports')} dataSource={myReports} />
</TabPane>
<TabPane tab="所有报告" key="allReports">
<Table columns={getColumns('allReports')} dataSource={allReports} />
</TabPane>
</Tabs>
);
|
这样，我们就实现的动态列的功能，但是这个方法有一个问题，那就是会产生大量的重复代码，如果两个tab的内容几乎相同，只有作者这一列不同的话，那么我们可以提取一个基类用来渲染tab内容，然后在基类中根据tab的不同来决定显示哪些列。
也就是说，我们只需定义一个columns对象，然后在这个组件中根据传入的tab来决定显示哪些列。这时候我们可以用Columns中的hidden属性来隐藏某些列。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| const ReportTable = ({ tab }: { tab: 'myReports' | 'allReports' }) => {
const columns = [
{
title: '标题',
dataIndex: 'title',
},
{
title: '创建时间',
dataIndex: 'createdAt',
},
{
title: '作者',
dataIndex: 'author',
hidden: tab === 'myReports',
},
];
return <Table columns={columns} dataSource={dataSource} />;
};
|
这样的实现，是不是更优雅呢？这种方式的好处即使避免大量的重复代码，程序员嘛，怎么能老是重复呢？