滚动 MudTable 使所选项目可见

Question

我有一个 Blazor WASM 应用程序，它使用 MudTable 显示List<T>中的许多行。

MudTable 使用@ref="_mappingTable"来标识代码中的表。

在代码中，我设置了所选项目：

_mappingTable.SetSelectedItem(specificItemFromTheList);
StateHasChanged();

这似乎工作正常。 但是，我希望表格自动滚动，以便该项目现在可见。 它不会自动执行此操作，也不确定如何实现。

Answer 1

有一个未解决的问题要求一个新的 function “滚动到 MudTable 中的行” https://github.com/MudBlazor/MudBlazor/issues/5445

您可以等待该问题得到解决或尝试用户geometrikal发布的替代方案

当前使用此代码将一行滚动到视图中。 它假定表格行的高度都相同。

export function scrollMudTableToRow(rowIndex) {
    var tableElement = document.querySelector("div.mud-table-container");
    var tableHeight = tableElement.offsetHeight;
    var tableOffset = tableElement.scrollTop;
    var tableRowHeight = tableElement.querySelector("tr.mud-table-row").scrollHeight;

    // Element is above view - scroll so it is at top
    if (rowIndex * tableRowHeight < tableOffset) {
        tableElement.scrollTo(0, rowIndex * tableRowHeight);
    }
    // Element is below view - scroll so that it is at bottom
    else if ((rowIndex + 1) * tableRowHeight > tableOffset + tableHeight) {
        tableElement.scrollTo(0, (rowIndex + 1) * tableRowHeight - tableHeight);
    }    
}