UI 库 Ant Design 中的 Table 表格和分页器：快速实现数据展示和分页功能

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

Ant Design 是一个流行的 React UI 库，提供了丰富的组件来帮助开发者快速构建美观的用户界面。Table 组件和分页器是 Ant Design 中常用的两个组件，用于展示列表数据和实现数据的分页功能。

Table 组件

Ant Design 的 Table 组件允许开发者轻松地展示和操作数据列表。

基本用法

import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  // ...更多数据
];

function App() {
  return <Table columns={columns} dataSource={data} />;
}

分页功能

Table 组件内置了分页功能，可以通过 pagination 属性进行配置。

<Table
  columns={columns}
  dataSource={data}
  pagination={{
    pageSize: 10, // 每页显示的记录数
    showSizeChanger: true, // 是否可以改变 pageSize
    pageSizeOptions: ['10', '20', '30', '40'], // 指定每页可以显示多少条
  }}
/>

分页器组件

Ant Design 还提供了独立的分页器组件 Pagination，可以在需要时单独使用。

基本用法

import { Pagination } from 'antd';

function App() {
  const handlePageChange = (page, pageSize) => {
    console.log(page, pageSize);
  };

  return <Pagination defaultCurrent={1} total={50} onChange={handlePageChange} />;
}

配置项

分页器组件有许多配置项，可以根据需要进行设置，例如 current（当前页）、pageSize（每页条数）、total（总条数）等。

结论

Ant Design 的 Table 组件和分页器组件为开发者提供了强大的数据展示和分页功能。通过简单的配置，可以快速实现复杂的数据列表和分页交互。在使用这些组件时，建议参考 Ant Design 的官方文档，以了解更多高级用法和定制选项。