当高度固定时，如何调整mudblazor中数据网格的大小并删除不必要的空间

Question

我正在使用 muddatagrid，并且我已经设置了数据网格的高度，该高度根据屏幕尺寸动态变化，当每页行数超过高度时，它会显示滚动条。但是当记录数小于 height 或 rowsperpage 时，就会出现问题，分页器内容和数据网格底部的记录之间会出现过多的空间。例如，如果要显示的记录少于 10 条，则数据网格的底部，实际记录和分页器内容之间会有一个空格（我已添加分页）。当有多个页面时，这种情况也会发生在最后一页。在这种情况下，我想将剩余页面的高度设置为自动高度，其中记录低于上述高度。我怎样才能实现这个目标。

我已经为此问题添加了 mudblazor 片段。

https://try.mudblazor.com/snippet/ckQIEHaSwUQhyioT

谢谢！！！

Answer 1

肯定有更好的解决方案，但至少这个对我有用。

您可以定义一个方法来“重新计算”高度。对我来说，最困难的部分是在调用事件时定义一个事件，因为 DataGrid 似乎没有“CurrentPage 更改事件”。所以我每次渲染一行时都会调用该方法：

<Columns>
    <PropertyColumn Property="x => x.Number" Title="Nr" />
    <PropertyColumn Property="x => x.Sign" />
    <PropertyColumn Property="x => x.Name" />
    <PropertyColumn Property="x => x.Position" />
        <TemplateColumn Title="Molar mass">
            <CellTemplate>
                @(RecalculateHeight())
                @context.Item.Molar
            </CellTemplate>
        </TemplateColumn>
</Columns>

ReenderGrid 方法只是检查

CurrentPage

是否是最后一个，如有必要，调用

StateHasChanged

private string RerenderGrid()
{
    if(Elements.Count() == 0 || dataGrid.CurrentPage == (Elements.Count() / rowsperpage)) 
    {
        if(dataGrid.Height == "500px")
        {
            StateHasChanged();
        }
    }
    else if(dataGrid.Height == string.Empty)
    {
        StateHasChanged();
    }
    return string.Empty;
}

网格然后使用 GetHeight 方法再次设置其高度

private string GetHeight(){
    if(Elements.Count() == 0 || dataGrid.CurrentPage == (Elements.Count() / rowsperpage)) 
    {
        return string.Empty;
    }
    else 
    {
        return "500px";
    }
}

别忘了打电话

 <MudDataGrid 
    @ref="dataGrid" 
    Items="@Elements" 
    Filterable="true" 
    FilterCaseSensitivity="DataGridFilterCaseSensitivity.CaseInsensitive" 
    RowsPerPage="@rowsperpage"  
    Context="context" 
    FixedHeader="true" 
    Height="@GetHeight()"
>

泥片段