Blazor Virtualize组件Placeholder标签无法正常工作求助

这不是通用Bug，你的代码里有几个关键问题导致Placeholder无法正常显示，下面是具体分析和修复方案：

问题分析 #

1. 缺少Virtualize所需的固定高度容器
   Virtualize组件依赖父容器的固定高度来计算可视区域范围，如果没有设置，它会一次性加载所有数据，Placeholder没有触发机会。同时你的代码里直接把<tr>放在Virtualize中，不符合HTML规范（<tr>必须嵌套在<table><tbody>内），浏览器会自动修正DOM结构，导致Virtualize布局计算异常。

2. LoadCars方法没有真正的异步延迟
   当前MakeTenThousandCars是同步生成数据，用Task.FromResult包装成异步任务，导致LoadCars几乎瞬间完成，Placeholder来不及渲染。注释掉的Thread.Sleep是阻塞式延迟，也不推荐使用（会卡住UI线程）。

3. 初始加载判断逻辑无效
   @if(LoadCars == null)这个判断永远为false，因为LoadCars是类的成员方法，不会为null，所以这个加载提示也不会显示。

修复后的代码 #

amaurys.razor.cs #

修改LoadCars方法，添加非阻塞的异步延迟：

private async ValueTask<ItemsProviderResult<Car>> LoadCars(ItemsProviderRequest request)
{
    var cars = await MakeTenThousandCars();
    int milliseconds = 2000;
    await Task.Delay(milliseconds); // 替换Thread.Sleep，非阻塞延迟UI线程
    return new ItemsProviderResult<Car>(cars.Skip(request.StartIndex).Take(request.Count), cars.Count());
}

amaurys.razor #

修正HTML结构，给Virtualize添加固定高度的父容器，并完善Placeholder的：

@page "/amaurys"

<PageTitle>Virtualize Example</PageTitle>

<h1>Virtualize Example</h1>

<p>Parapipo.</p>

<button @onclick="@OnButtonAClicked">Load Cars</button>

<!-- 给table设置固定高度和滚动，作为Virtualize的父容器 -->
<table style="height: 400px; overflow-y: auto; display: block;">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Cost</th>
        </tr>
    </thead>
    <tbody>
        <Virtualize Context="car" ItemsProvider="@LoadCars">
            <ItemContent>
                <tr class="test">
                    <td>@car.Id</td>
                    <td>@car.Name</td>
                    <td>@car.Cost</td>
                </tr>
            </ItemContent>
            <Placeholder>
                <!-- 使用colspan让提示占满整行 -->
                <tr class="amarillo">
                    <td colspan="3">Loading items...</td>
                </tr>
            </Placeholder>
        </Virtualize>
    </tbody>
</table>

<style>
    .test {
        background-color: red;
    }
    .amarillo {
        background-color: yellow;
    }
</style>

修复说明 #

• 固定高度的父容器让Virtualize能正确计算可视区域，触发虚拟化加载逻辑，Placeholder会在数据加载时显示。
• Task.Delay是非阻塞延迟，不会卡住UI线程，确保Placeholder有足够时间渲染。
• 修正HTML结构后，Virtualize的内容能正确渲染，Placeholder的样式和布局也能正常生效。

内容的提问来源于stack exchange，提问作者Amaurys Sánchez