Table滚动到指定行方法

  1. <Table
  2.   bordered 
  3.   columns={columns}
  4.   dataSource={data}
  5.   pagination={false}
  6.   rowClassName={setClassName}
  7.   scroll={{ y: 440 }}
  8. />
  10. // 设置行样式
  11. function setClassName(record, index) {
  12.   if(record.id == state.currentId){
  13.     return `row${index} ${styles.highlight}`; // 自定义 highlight样式
  14.   }
  15.   return `row${index}`;
  16. }
  19. // 滚动条滚动到高亮行位置
  20. // value：当前需要高亮的值
  21. getRowHeightAndSetTop(dataSource, value){
  22.   for(const [item, index] in dataSource.entries()) {
  23.     if(item.id !== value) break;
  25.     // 40是一行的高度，index*40就是滚动条要移动的位置
  26.     let offset = index * 40;
  27.     $(`.ant-table-body`).scrollTop(offset);
  28.   }
  29. }

Table分页滚动到顶部

问题点： Table 在当前页，向下滑动后，再翻页后滚动条还是在原处
需求： 翻页的时候，把当前的滚动条定位到表格的顶部

  1. <Table ref={tableRef} />
  3. const $table = tableRef.current.querySelector('.ant-table-body');
  5. // 翻页的时候让滚动条到顶部
  6. $table.scrollTop = 0;