Ant Design中Layout与Table组件的结合使用
在上一篇推送中我们深入探讨了Ant Design框架中的Layout组件及其应用方法。接下来我们将深入研究如何将Layout组件与Table组件进行整合以构建一个兼具导航功能和数据展示能力的数据页面布局结构。其中Table表格主要应用于展示行列形式的数据内容在此基础之上我们可以根据实际需求处理复杂的场景如对大量结构化数据进行排序筛选分页以及自定义操作等功能从而提升用户体验效果
首先我们可以在Ant Design中查找所需的Table组件在Ant Design中查找所需Table组件）。在Ant Design中查找所需Table组件）。Table组件的样式种类繁多（Table组件的样式种类繁多），选择合适的样式后复制其代码并将其整合到布局组件中即可轻松实现数据展示。（选择合适的样式后复制其代码并将其整合到布局组件中即可轻松实现数据展示。）
本文举例树形数据展示。
该表格能够以树形结构呈现数据；当数据包含 children 字段时，默认显示为树形结构；如果不希望使用此字段或需指定其他字段名称时，则需通过 childrenColumnName 来设置。
可以通过设置 indentSize 以控制每一层的缩进宽度。
复制antd表格组件代码到layout，将其放入合适位置。
import React, { useState } from 'react';
import { Space, Switch, Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: '12%',
},
{
title: 'Address',
dataIndex: 'address',
width: '30%',
key: 'address',
},
];
const data = [
{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [
{
key: 11,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park',
},
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Brown',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr.',
age: 25,
address: 'London No. 3 Lake Park',
},
{
key: 1312,
name: 'Jimmy Green sr.',
age: 18,
address: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
},
];
// rowSelection objects indicates the need for row selection
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
};
const App = () => {
const [checkStrictly, setCheckStrictly] = useState(false);
return (
<>
<Space
align="center"
style={{
marginBottom: 16,
}}
>
CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />
</Space>
<Table
columns={columns}
rowSelection={{
...rowSelection,
checkStrictly,
}}
dataSource={data}
/>
</>
);
};
export default App;页面效果如下所示
这样就实现了简单的数据展示。
从上述实例可以看出，在这一过程中我们展示了如何将Antd的Layout和Table组件进行整合以实现数据展示功能。该方案不仅具备条理清晰且功能全面的特点，并且充分体现了Antd设计理念凸显出组件间的高度可组合性。这一设计理念使得开发者可根据需求灵活地整合不同组件以构建复杂而高效的界面。
深入研究 Antd 的响应式布局功能及其在不同设备上的优化效果。通过调整 CSS 和 Antd 提供的样式定制接口, 可以实现灵活多样的组件外观设计, 从而满足项目对视觉效果的具体需求。此外, 表格组件还具备虚拟滚动和懒加载等高级性能, 这些特性有助于提升大数据集处理时的表现效率。通过合理配置 Antd 的Layout与表格组件, 开发者能够轻松打造既美观又实用的数据展示界面, 进一步提升开发效率和用户体验。