🧐[问题] 如何在 EditableProTable或者ProTable中使用 antd Table 的 table ref？

[roadloser]

🧐 问题描述

我将 pro-components 内置的 antd 版本指定为 5.11.0，并启用了虚拟化功能。在尝试使用 EditableProTable与ProTable 提供的 actionRef 时，发现没有类似于 table ref 中的 scrollTo 方法可用。我还尝试直接注入一个 ref，希望能够实现目标，但实际上这个 ref 似乎并没有被成功注入到 Table 组件的 ref 上。

请问有什么方法可以解决这个问题吗？非常感谢！

[ChenAlmost]

#4509
遇到了同样的问题，发现是没有暴露出这个api。

[Deer404]

遇到了同样的问题，

[chenshuai2144]

在 EditableProTable 或 ProTable 中使用 antd 的 Table 的 table ref，可以通过 actionRef 属性来实现。你可以先引入 ActionType 类型并使用 useRef 创建一个 actionRef 对象：

import { ProColumns, ActionType } from '@ant-design/pro-table';
import { useRef } from 'react';

const columns: ProColumns<API.CurrentUser>[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    hideInSearch: true,
  },
];

const actionRef = useRef<ActionType>();

export default <ProTable actionRef={actionRef} />;

然后，你就可以通过 actionRef 来获取 Table 组件的实例，并调用其相关的方法来滚动至指定位置。例如，你可以在需要的地方调用 actionRef.current?.scrollTo 方法来实现滚动操作。

请注意，Table 组件的 ref 不会直接注入到 ProTable 或 EditableProTable 上，而是注入到 actionRef 对象中，通过 actionRef.current 来访问 Table 组件的实例。

如果是table本身的 dom，推荐使用 id 来设置。

[bowencool]

没有这个 scrollTo 方法，是我写错了吗

我现在是这么写的，暂时能用：

            document.querySelector(".ant-table-body")?.scrollTo({ top: 0 });

在 EditableProTable 或 ProTable 中使用 antd 的 Table 的 table ref，可以通过 actionRef 属性来实现。你可以先引入 ActionType 类型并使用 useRef 创建一个 actionRef 对象：

然后，你就可以通过 actionRef 来获取 Table 组件的实例，并调用其相关的方法来滚动至指定位置。例如，你可以在需要的地方调用 actionRef.current?.scrollTo 方法来实现滚动操作。

请注意，Table 组件的 ref 不会直接注入到 ProTable 或 EditableProTable 上，而是注入到 actionRef 对象中，通过 actionRef.current 来访问 Table 组件的实例。

如果是table本身的 dom，推荐使用 id 来设置。

[here-is-zhizhi]

@ChenAlmost

在 EditableProTable 或 ProTable 中使用 antd 的 Table 的 table ref，可以通过 actionRef 属性来实现。你可以先引入 ActionType 类型并使用 useRef 创建一个 actionRef 对象：

import { ProColumns, ActionType } from '@ant-design/pro-table';
import { useRef } from 'react';

const columns: ProColumns<API.CurrentUser>[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    hideInSearch: true,
  },
];

const actionRef = useRef<ActionType>();

export default <ProTable actionRef={actionRef} />;

然后，你就可以通过 actionRef 来获取 Table 组件的实例，并调用其相关的方法来滚动至指定位置。例如，你可以在需要的地方调用 actionRef.current?.scrollTo 方法来实现滚动操作。

请注意，Table 组件的 ref 不会直接注入到 ProTable 或 EditableProTable 上，而是注入到 actionRef 对象中，通过 actionRef.current 来访问 Table 组件的实例。

如果是table本身的 dom，推荐使用 id 来设置。

Table 的实例并未暴漏在 actionRef.current 上

[lumiaoshan]

遇到了同样的问题