一文教会你使用React+Antd Table+Hooks 实现表格序号自增，翻页后序号不从1开始

前端

2022-11-15 10:13:01

Ant Design Table组件：实现序号自增

摘要

在本文中，我们将探究如何利用React、Ant Design Table组件和Hooks，为表格实现自动递增的序号，即使在分页后序号也不会重置。

准备工作

在开始之前，请确保已安装以下软件：

Node.js
React
Ant Design
Hooks

创建React项目

创建一个新的React项目并安装所需的依赖项：

运行npx create-react-app my-app创建一个新项目。
进入项目目录：cd my-app。
安装Ant Design：npm install antd。
安装Hooks：npm install react-hooks。

编写代码

在src目录下创建文件TableWith序号SelfIncrement.js，并输入以下代码：

// 导入必要的模块
import React, { useState, useEffect } from "react";
import { Table, Button } from "antd";

// 定义组件
const TableWith序号SelfIncrement = () => {
  // 使用状态管理数据和页码信息
  const [data, setData] = useState([]);
  const [pageOption, setPageOption] = useState({
    pageNo: 1,
    pageSize: 10,
  });

  // 组件挂载时从服务器获取数据
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  // 定义表格列
  const columns = [
    {
      title: "序号",
      render: (text, record, index) =>
        `${(pageOption.pageNo - 1) * 8 + (index + 1)}`,
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "完成状态",
      dataIndex: "completed",
      key: "completed",
      render: (text) => (text ? "已完成" : "未完成"),
    },
  ];

  // 定义分页信息
  const pagination = {
    total: data.length,
    pageSize: pageOption.pageSize,
    current: pageOption.pageNo,
    onChange: (pageNo) => {
      setPageOption({ ...pageOption, pageNo });
    },
  };

  // 渲染表格
  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        pagination={pagination}
        rowKey="id"
      />
    </div>
  );
};

export default TableWith序号SelfIncrement;