ZBLOG

`共 ${total} 条`} showQuickJumper defaultPageSize={20} current={currentPage} ...

要实现页码的高亮显示,可以通过在Pagination组件中添加一个active属性来标记当前页码。具体的做法如下:

首先,在Pagination组件中根据当前页码与pageIndex进行对比,判断是否添加active属性:

<Pagination
    showTotal={total => `共 ${total} 条`}
    showQuickJumper
    defaultPageSize={20}
    current={currentPage}
    pageSize={pageSize}
    pageSizeOptions={numArticles}
    showSizeChanger
    total={total}
    onChange={tableOnChange}
>
  {Array.from({ length: numPages }, (_, index) => (
      <Pagination.Item key={index} active={index === currentPage}>
          {index + 1}
      </Pagination.Item>
  ))}
</Pagination>

这里使用了Array.from和map函数生成了一个长度为numPages的数组,并通过索引判断当前页码是否需要添加active属性。

然后,在tableOnChange方法中更新currentPage的值:

const tableOnChange = (pageIndex, pageSize) => {
    console.log(pageIndex, pageSize, 'duha')
    setCurrentPage(pageIndex)
    setPageSize(pageSize)
    getFeatureProduct(pageIndex, pageSize, props.displayPlatform);
};

这样就能根据currentPage与索引进行对比,动态设置相应页码的高亮显示。

请注意,在上述代码片段中,你需要将Pagination.Item替换为适合你项目的实际组件或HTML元素。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=16909

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?