antd table 滚动到指定行方法

查了Ai 给的方法是tableRef.current.scrollToRow(0);

但是实际上用地antd3 压根没有这个方法。

分享一下我自己想的一个简答的办法。

1、需要定位的行要有唯一的标识 例如id。

let data = [
  {
    id: 1
  },
  {
    id: 2
  },
  {
    id: 3
  },
]

 这个id是为了方便找到所在行的位置。

2、在写Table 的Columns的时候 给这一行的某个字段（如果是id这字段更好）加上类名

className，例如：

{
      title: 'Id',
      dataIndex: 'id',
      align: 'left',
      width: 200,
      className: `th-center`,
      onCell: (record) => {
        return {
          className: `table-title d-${record.id}`,
        }
      },
      render: (text, record) => {
        return text
      }
}

最主要的就是onCell 这里，这个可以拿到这一行的信息 return 的className中 加上id类名，如果id是纯数字这种的建议前面加上一个字母，方便下面获取类名。

3、在需要滚动到某一行的地方使用下面代码：

      let ele = document.querySelector(`.d-${id}`)
      if (ele) {
        ele.scrollIntoView()
      }

这里应该就明白上面为什么要加类名了。就是通过获取唯一的dom ，再通过dom自带的方法scrollIntoView() 将该行滚动到视口处。

scrollIntoView方法里面有一些配置，可以方便调节滚动的位置什么的。例如：

scrollIntoView({behavior: 'smooth', block: 'start'}); behavior：滚动方式smooth就是平滑滚动， block是滚动的位置，start就是开头。 具体用法自行百度。

4、这个方法有一定的缺陷就是，这一行必须是渲染出来的，这一行必须是可以看到的。例如使用的折叠行的话，dom没有渲染出来，就会找不到这一行，不过可以事先展开这一行，渲染出来就可了。