antd description 太宽了

在上篇文章中我们学习了在React中使用antd的Layout组件，现在，我们将Layout和Table组件结合起来，创建一个具有导航和数据表格的页面布局。Table表格用于展示行列数据，当有大量结构化的数据需要展现时或当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时我们可以使用Table表格

首先我们可以在antd里寻找我们所需要的table表格组件，表格 Table - Ant Designantd中table表格样式很多，表格 Table - Ant Design，选择好之后复制其代码将其放入layout组件之中就可以简单实现数据展示。

本文举例树形数据展示。

表格支持树形数据的展示，当数据中有 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的样式定制功能，可以轻松地定制组件的样式，以符合项目的设计规范。
高级功能：Table组件还支持虚拟滚动、懒加载等高级功能，以提高大数据集的性能。
通过结合Antd的Layout和Table组件，开发者可以快速构建出既美观又实用的数据展示界面，大大提高开发效率和最终产品的用户体验。