react + antd table +hooks 如何实现表格序号自增翻页后序号不从1开始算起

给<Table>设置属性：

数据源dataSource、列表头columns、分页pagination

//渲染元素
return
<><Tablesize='small'dataSource={dataSource}columns={columns}//引入分页APIpagination={paginationProps}rowKey={record => record}></Table></>

paginationProps 分页配置

 const paginationProps = {current: pageOption.pageNo,pageSize: pageOption.pageSize,onChange: (current, size) =>                     paginationChange(current, size)}

分页默认值，记得import useState

 const [pageOption, setPageOption] = useState({pageNo: 1,  //当前页为1pageSize: 8, //一页8行})

当翻页时，改变当前为第current页，current和size这两参数是上面pagination的onChange API自带的，会帮你算出来你现在在第几页，这一页有多少行数据。

const paginationChange = async (current, size) => {//前面用到useStatesetPageOption({pageNo: current, //当前所在页面pageSize: size,  //一页有几行})}

//**关键一步实现表格序号自增：在columns数组的序号对象里增加render方法，让序号等于（当前页面-1）×size + index索引号 + 1

const columns = [{title: '序号',render: (text, record, index) => `${(pageOption.pageNo - 1) * 8 + (index + 1)}`,//${} 中可以放入JS表达式；``是模板字符串，可以在里面加变量},...]

全部代码：

//分页默认值，记得import useStateconst [pageOption, setPageOption] = useState({pageNo: 1,  //当前页为1pageSize: 8, //一页8行})//分页配置const paginationProps = {current: pageOption.pageNo,pageSize: pageOption.pageSize,onChange: (current, size) =>                     paginationChange(current, size)}//当翻页时，改变当前为第current页，current和size这两参数是onChange API自带的，会帮你算出来你现在在第几页，这一页有多少行数据。
const paginationChange = async (current, size) => {//前面用到useStatesetPageOption({pageNo: current, //当前所在页面pageSize: size,  //一页有几行})}//渲染元素
return
<><Tablesize='small'dataSource={dataSource}columns={columns}//引入分页APIpagination={paginationProps}rowKey={record => record}></Table></>//**关键一步 实现表格序号自增：在columns数组的序号对象里增加render方法，让序号等于（当前页面-1）×size + index索引号 + 1
const columns = [{title: '序号',render: (text, record, index) =>   `${(pageOption.pageNo - 1) * 8 + (index + 1)}`,//${} 中可以放入JS表达式；``是模板字符串，可以在里面加变量},...]

react + antd table +hooks 如何实现表格序号自增翻页后序号不从1开始算起相关推荐

React antd table使用react-resizable实现伸缩列
首先声明注意点: 1.设置列宽的width一定要用number类型.(如果不使用number类型,会出现第一次点击时卡顿的情况) 2.less中需要设置类的样式,如果无效,可以尝试加上:global( ...
element 表格全选,，翻页选中取消相关效果
elementui的表格默认是没有所有数据选中的操作的,仅仅只是选中当前页的10条或者20条数据,因此我们需要自己手动加入一个全选操作的按钮.以此来将数据全部选中保存. 第一步操作思路:全选操作反过 ...
vue2-element,vue3-element-plus 的列表翻页的序号
前言: 这里整理下,vue2,vue3中用饿了么框架的列表,序号随页增加的功能 vue2: page=当前页,pageSize=一页显示多少条 type="index" :inde ...
react antd Table 表格 td超出自动换行
1.问题: 目前有打印需求遇到了点问题,打印时表头太长导致出现横向滚动条,而借助于 react-to-print只能打印出视图区可见内容,所以打印的时候滚动条里面的内容没打印到. 现在为了完整打印页面 ...
React antd Table 实现单元格点击表头斜线分组等功能
先上成品示意图: 几个关键步骤: 一定义数据结构: export const data = [{key: 'row1',beforeUpdateLevel: '等级1',level_1: '保',l ...
react antd Table 选中某一行，其它行也被选中了
问题描述: 使用react_antd_design 中的Table组件,渲染的结果如下: 但是现在出现的问题是当我选中其中的一行,其他的行也变成了选中的状态,无法实现选中单行这当然不是我们想要的结果 ...
python网上批量下载表格_python爬虫智能翻页批量下载文件的实例详解
python爬虫遇到爬取文件内容时,需要一页页的翻页爬取,这样很是麻烦,其实可以获取每个列表信息下的文件名和文件链接,让文件名和文件链接处理为列表,保存后下载,实现智能翻页批量下载文件,本文以以京客隆 ...
antd table横向滚动条样式自定义
总结了一份在工作中常用的antd table 滚动条样式优化的代码原样式: 优化后样式: :global { //修改框架样式关键字//表格头标题的滚动条设置// 为什么设置标题头滚动条呢,因为a ...
让Swing表格支持远程后台数据翻页
TWaver Java不但提供了TTable.TElementTable这些表格组件,而且还提供了表格翻页器TPageNavigator.让表格和翻页器结合工作,可以立刻做出一个非常标准的可翻页的表格 ...
java swing表格翻页_让Swing表格支持远程后台数据翻页
TWaver Java不但提供了TTable.TElementTable这些表格组件,而且还提供了表格翻页器TPageNavigator.让表格和翻页器结合工作,可以立刻做出一个非常标准的可翻页的表格 ...

react + antd table +hooks 如何实现表格序号自增翻页后序号不从1开始算起

react + antd table +hooks 如何实现表格序号自增翻页后序号不从1开始算起相关推荐

最新文章

热门文章

react + antd table +hooks 如何实现表格序号自增 翻页后序号不从1开始算起

react + antd table +hooks 如何实现表格序号自增 翻页后序号不从1开始算起相关推荐

最新文章

热门文章

react + antd table +hooks 如何实现表格序号自增翻页后序号不从1开始算起

react + antd table +hooks 如何实现表格序号自增翻页后序号不从1开始算起相关推荐