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

给

设置属性：

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

//渲染元素
return
<>
      

record} >

paginationProps 分页配置

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

分页默认值，记得import useState

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

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

const paginationChange = async (current, size) => {
    //前面用到useState
    setPageOption({
      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 useState
   const [pageOption, setPageOption] = useState({
    pageNo: 1,  //当前页为1
    pageSize: 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) => {
    //前面用到useState
    setPageOption({
      pageNo: current, //当前所在页面
      pageSize: size,  //一页有几行
    })
  }

//渲染元素
return
<>
       record}
      >
 


//**关键一步 实现表格序号自增：在columns数组的序号对象里增加render方法，让序号等于（当前页面-1）×size + index索引号 + 1
const columns = [
    {
      title: '序号',
      render: (text, record, index) => 	`${(pageOption.pageNo - 1) * 8 + (index + 1)}`,
     //${} 中可以放入JS表达式；``是模板字符串，可以在里面加变量
    },
    ...
    ]