Blazor WASM中MudTable选中项自动滚动至可见位置实现问询

方案一：针对常规表格（非虚拟滚动） #

• 给表格行添加唯一标识
  在MudTable的RowTemplate中，为每行绑定一个基于数据唯一字段的ID，方便定位DOM元素：

<MudTable @ref="_mappingTable" Items="@dataList">
    <RowTemplate>
        <MudTd id="row-@context.Id">@context.DisplayName</MudTd>
        <!-- 其他列内容 -->
    </RowTemplate>
</MudTable>

替换context.Id为你的数据模型中实际的唯一字段（如Guid、自增ID等）。

• 注入IJSRuntime并编写滚动方法
  在组件中注入JS运行时，通过浏览器API实现滚动：

@inject IJSRuntime JSRuntime

private async Task ScrollToTargetRow(T targetItem)
{
    // 确保DOM已完成选中项的渲染更新
    await InvokeAsync(StateHasChanged);
    // 调用自定义JS函数滚动到目标元素
    await JSRuntime.InvokeVoidAsync("scrollToElement", $"row-{targetItem.Id}");
}

在wwwroot/index.html中添加全局JS函数：

<script>
function scrollToElement(elementId) {
    const targetRow = document.getElementById(elementId);
    if (targetRow) {
        // 平滑滚动到行中心位置，可调整behavior和block参数
        targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
}
</script>

• 修改选中项逻辑
  设置选中项后立即调用滚动方法：

_mappingTable.SetSelectedItem(specificItemFromTheList);
await ScrollToTargetRow(specificItemFromTheList);

方案二：针对虚拟滚动表格（大量数据场景） #

如果你的MudTable开启了虚拟滚动（Virtualize="true"），优先使用MudBlazor内置的滚动方法更高效：

// 设置选中项
_mappingTable.SetSelectedItem(specificItemFromTheList);
// 直接调用内置方法滚动到目标项
await _mappingTable.ScrollToItemAsync(specificItemFromTheList);

该方法会自动处理虚拟滚动的行加载，无需额外DOM操作。

内容的提问来源于stack exchange，提问作者DrGriff