antd Table实现 滚动到 指定位置

使用场景和需求：

当 表格出现滚动条时，想让其滚动到指定位置。

实现步骤：

给Table设置 一个 类名 或者 id 最好时id

方式一、可以用 js的方式 获取元素

<Table  id="box" columns={columns} dataSource={data} scroll={{y:300}}/>

componentDidMount(){ //一进来就滚动
  setTimeout(()=>{  //加定时器 因为 可能 table还没渲染 完就 获取元素 防止 获取不到
   let box=document.getElementById("box");
   let v=document.getElementsByClassName("ant-table-body")[0];
  if(v){
    v.scrollTop=200;
  }
   
    //这样也可以
   //  let v=box.getElementsByClassName("ant-table-body")[0];  //最好判断一下v存在再赋值
   // v.scrollTop=200;
  
 
 },2000)
}

如果式hooks里就需要放到 useEffect

useEffect(() => {
     setTimeout(()=>{  //加定时器 因为 可能 table还没渲染 完就 获取元素 防止 获取不到 如果你是加载完后 再操作就不用加定时器了
   let box=document.getElementById("box");
   let v=document.getElementsByClassName("ant-table-body")[0];
  if(v){
    v.scrollTop=200;
  }
});

 

方式二、用react的ref获取 也可以 ，或者其他方式比如jq

可以看看这个示例：

antd Table滚动到 指定 位置 -在线 示例