Table 表格--分页序号自增

 代码:

import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useState } from 'react';interface DataType {key: string;name: string;age: number;address: string;tags: string[];
}const data: DataType[] = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer'],},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park',tags: ['loser'],},{key: '3',name: 'Joe Black',age: 32,address: 'Sydney No. 1 Lake Park',tags: ['cool', 'teacher'],},
];const App: React.FC = () => {const [currentPage, setCurrentPage] = useState<number>(1);const pageSize = 2;const columns: ColumnsType<DataType> = [{title: 'number',dataIndex: 'number',key: 'number',align: 'center',render: (e, elem, index) => {const currentStartIndex = (currentPage - 1) * pageSize + 1;const currentIndex = currentStartIndex + index;return currentIndex;},},{title: 'Name',dataIndex: 'name',key: 'name',render: (text) => <a>{text}</a>,},{title: 'Age',dataIndex: 'age',key: 'age',},{title: 'Address',dataIndex: 'address',key: 'address',},{title: 'Tags',key: 'tags',dataIndex: 'tags',render: (tags: string[]) => (<span>{tags.map((tag) => {let color = tag.length > 5 ? 'geekblue' : 'green';if (tag === 'loser') {color = 'volcano';}return (<Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>);})}</span>),},{title: 'Action',key: 'action',render: (_, record) => (<Space size="middle"><a>Invite {record.name}</a><a>Delete</a></Space>),},];return (<Tablecolumns={columns}dataSource={data}pagination={{ current: currentPage, pageSize: pageSize }}onChange={(pagination) => {setCurrentPage(pagination.current as number);}}/>);
};export default App;

结果: 

重点代码截图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/42730.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python爬虫入门(四)之Beautiful Soup库

一、什么是Beautiful Soup库 1、Beautiful Soup库是用来做HTML解析的库 Beautiful Soup把看起来复杂的HTML内容&#xff0c;解析成树状结构&#xff0c;让搜索和修改HTML结构变得更容易 2、第三方库&#xff0c;先安装 终端输入pip install bs4 from bs4 import Beautiful…

Linux服务管理(一)SSH服务

Linux服务管理-SSH服务 1、SSH的登录验证2、SSH的登录端口设置3、SSH的登录用户设置4、SSH的登录超时设置5、SSH的尝试登录次数设置6、ssh尝试次数超了&#xff0c;服务器端怎么放行 程序优化是有上限的&#xff0c;比如一个网站的代码量你只会随着需求越写越多不会越写越少。架…

想买开放式耳机怎么选?五款高热度产品甄选推荐!

在追求自由与舒适的今天&#xff0c;开放式蓝牙耳机以其独特魅力&#xff0c;正引领音频设备的新风尚。它们摒弃了传统入耳式的封闭束缚&#xff0c;让音乐与周围世界和谐共存&#xff0c;既保证了音质的清晰与沉浸&#xff0c;又保留了对环境的敏锐感知。开放式设计不仅减轻了…

16jQuery基本语法

【一】jQuery基本语法 jQuery(选择器).action() 简写 jQuery(选择器) ----> $(选择器) (1)js与jquery对比 <script>// 原生jslet p1Ele document.getElementById("p1");let p2Ele document.getElementById("p2"); ​p1Ele.style.color red…

Maven Dependencies missing jar 解决

信息摘要来自:https://blog.csdn.net/weixin_33769207/article/details/93681274 项目右键maven->update project。 如果还有 missing 的jar&#xff0c;再项目右键maven->update project&#xff0c;但是这次勾选 Force Update ...那一行&#xff0c;再OK。 如果此时依然…

【2024最新】Arduino通过Python进行串口通信控制电机

1. 背景 最近想研究一下用 Python 控制 Arduino 的技术&#xff0c;通过上网查询&#xff0c;发现可以用 Python 中的 serial 库来实现和 Arduino 主板的串口通信&#xff0c;从而控制 Arduino。 特此记录一下这个小项目的过程及出现的问题。 2. 基础准备 主板&#xff1a;…

selenium常用方法

打开浏览器定位元素的方法操作元素的方法操作浏览器的方法操作选择框的方法操作鼠标的方法 打开浏览器 from selenium import webdriver from selenium.webdriver.common.by import Bydriver webdriver.Edge()url "..." driver.get(url) driver.maximize_window()…

景联文科技打造高质量图文推理问答数据集,赋能大语言模型提升推理能力

大语言模型在处理推理任务时&#xff0c;不同于人类能够反思错误并修正思维路径&#xff0c;当它遇到自身知识盲区时&#xff0c;缺乏自我校正机制&#xff0c;往往导致输出结果不仅无法改善&#xff0c;反而可能变得更不准确。 需要依赖外部的知识库和推理能力来克服其在理解和…

【MySQL】2.库的操作

库的操作 一.创建数据库1.数据库的编码集 二.查看数据库三.修改数据库四.删除数据库五.数据库的备份和恢复 一.创建数据库 create database [if not exists] db_name [charsetutf8] [collateutf8_general_ci] //创建一个名为db_name的数据库&#xff0c;本质就是在/var/lib/my…

视觉图像面积计算

在图像处理和计算机视觉中&#xff0c;计算对象面积的常见方法有两种&#xff1a;使用四邻域标记算法和使用轮廓计算。每种方法在不同情况下有各自的优缺点。 四邻域标记算法&#xff1a; 优点&#xff1a; 简单易实现。能够处理带有孔洞的复杂区域&#xff08;只要孔洞不影响连…

WebKit性能优化秘籍:打造极速网页体验

WebKit性能优化秘籍&#xff1a;打造极速网页体验 在现代Web开发中&#xff0c;WebKit作为核心渲染引擎&#xff0c;其性能直接影响到网页的加载速度和运行效率。优化WebKit性能&#xff0c;不仅可以提升用户体验&#xff0c;还能增强应用的竞争力。本文将深入探讨如何优化Web…

Amazon Kinesis常用权限分类详解

Amazon Kinesis是一套用于实时收集、处理和分析数据流的平台化服务。为了确保Kinesis资源的安全性和访问控制,AWS提供了一套细粒度的权限管理机制。本文将详细介绍Kinesis的常用权限分类,并提供相应的JSON策略示例。 1. Kinesis Data Streams权限 Kinesis Data Streams是Ki…

蚓链实践告诉你“企业确保达成数字化营销效果的方法”

在如今这个数字化盛行的时代&#xff0c;企业想在激烈的市场竞争里崭露头角&#xff0c;确保数字营销效果那可是至关重要&#xff01;今天就来给大家聊聊实现这一目标的基本条件&#xff0c;来自蚓链数字化营销系统的广大用户体验总结。 一、精准的目标定位 企业一定要清楚地知…

uniapp 表格,动态表头表格封装渲染

1.接口表格数据&#xff1a; {"headers": [{"label": "实例名","name": "v1","order": 1,"hide": false,"dateTypeValue": null},{"label": "所属科室","name&quo…

CentOS 安装 annie/lux,以及 annie/lux 的使用

annie 介绍 如果第一次听到 annie 想必都会觉得陌生&#xff0c;annie 被大家称为视频下载神器&#xff0c;annie 作者介绍说可以下载抖音、哔哩哔哩、优酷、爱奇艺、芒果TV、YouTube、Tumblr、Vimeo 等平台的视频。 githup&#xff1a;https://github.com/pingf/annie 支持…

使用Boost.Asio编写TCP通信程序框架(一)

基于Boost.Asio库编写TCP通信程序框架&#xff1a; 我们首先需要明确几个关键点&#xff1a;节点间如何建立连接、消息如何传输、以及如何处理网络事件。以下是一个简化的设计方案&#xff1a; 1. 设计目标 可扩展性&#xff1a;系统应该能够轻松地添加或移除节点。容错性&…

51单片机嵌入式开发:1、STC89C52环境配置到点亮LED

STC89C52环境配置到点亮LED 1 环境配置1.1 硬件环境1.2 编译环境1.3 烧录环境 2 工程配置2.1 工程框架2.2 工程创建2.3 参数配置 3 点亮一个LED3.1 原理图解读3.2 代码配置3.3 演示 4 总结 1 环境配置 1.1 硬件环境 硬件环境采用“华晴电子”的MINIEL-89C开发板&#xff0c;这…

服务发现与注册:Eureka与Consul

在微服务架构中&#xff0c;服务发现与注册是一个非常重要的部分。通过服务发现机制&#xff0c;微服务能够相互找到并进行通信&#xff0c;而不需要了解彼此的具体地址。本文将详细介绍两种主流的服务发现与注册框架&#xff1a;Eureka和Consul&#xff0c;并提供相应的代码示…

elasticSearch快速了解

elasticSearch&#xff1a;经常用于搜索引擎&#xff0c;我们用的百度搜索和github上的搜索都是用的搜索引擎&#xff0c;它是对输入内容进行分析&#xff0c;然后查询&#xff0c;不像数据库模糊搜索的like一样必须含用你输入的全部内容。 elasticSearch优势&#xff1a;支持…

一文解决:你与该网站的连接不是私密连接,存在安全隐患

访问网页时&#xff0c;是不是会经常遇到网站不是私密连接的提示&#xff1f;当浏览器提示某个网页不安全时&#xff0c;这通常是因为网页使用的是非加密的HTTP协议&#xff0c;或者其HTTPS协议的SSL/TLS证书存在问题。 通常遇到这类网站时要注意&#xff0c;一来是网站未与证书…