具有行分组的 Blazor 虚拟化答案

【问题标题】：Blazor virtualization with row grouping具有行分组的 Blazor 虚拟化
【发布时间】：2022-06-14 21:35:47
【问题描述】：

我正在创建一个带有粘性标题的分组列表。真的很想用它来虚拟化。但是当我设置固定高度并在顶层table-content-container 上溢出时，虚拟化不起作用。虚拟化仅在固定高度和溢出设置为group-body-container 时有效。

这是我得到的 html 不起作用：

<div class="table-container">
    <div class="table-header grid-row-template">
        <div class="header-item">Id</div>
        <div class="header-item">Name</div>
    </div>
    
    <div class="table-content-container" style="height:50vh; overflow-y:scroll">
    @foreach (DataGroup group in dataGroups)
    {
        <div class="group-header">
            <MudToggleIconButton
                @bind-Toggled="@group.IsExpanded"
                Icon="@Icons.Filled.ExpandMore"
                Color="Color.Secondary"
                ToggledIcon="@Icons.Filled.ExpandLess"                
                Size="Size.Small"
                ToggledSize="Size.Small"/>
            <MudText Color="@Color.Primary">@group.GroupName</MudText>    
        </div>
        @if (group.IsExpanded)
        {
            <div class="group-body-container">
                <Virtualize Items="group.DataRow" Context="row" ItemSize="20">
                    <div class="grid-row-template data-row">
                        <div class="data-item">@row.Id</div>
                        <div class="data-item">@row.Name</div>
                    </div>
                </Virtualize>
            </div>
        }
    }
    </div>
</div>

虚拟化工作在这里：https://try.mudblazor.com/snippet/GEcwagOjgXcmYqFL

这里不起作用：https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY

目标是让虚拟化与第二个示例一起工作，当滚动时，只有顶部标题会“粘”。

编辑：这是我想要实现的目标的记录，但可以使用虚拟化 (https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY)：

这甚至可以通过 blazors 虚拟化组件实现吗？

【问题讨论】：

标签： html blazor

【解决方案1】：

这是因为 Virtualize 组件需要一个限制高度 - 无论是显式的还是隐式的。正如您现在所拥有的那样，每个 Virtualize 都可以增长到消耗所需的空间。

你可以让你的容器使用 flexbox 来实现这个

.table-content-container {
    display: flex;
    flex-direction: column;
    gap:0;
}

根据您的“不工作” sn-p 更新演示：https://try.mudblazor.com/snippet/wEGwaAvYdcGVTsMb

【讨论】：

您的解决方案有效，但它不是我所追求的。它使它像在滚动条位于组内的第一个示例中一样工作。我想将滚动条保留在外部容器上（就像在第二个示例中一样），但也让虚拟化在组内工作。
在我的演示中，虚拟化适用于每个组，并且外部容器有一个滚动条。您需要更清楚地解释您要实现的目标是什么，因为我看不出这里有什么行不通的地方。
我在我的原始帖子中添加了一段录音，其中显示了我希望通过工作虚拟化获得什么。问题是它是否可能。