要实现页码的高亮显示,可以通过在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助手提供,问题来源于学员提问


        
        
        
        
        
        
        
        
        
        
                
                
                
                
                
                
                