如何实现MudBlazor表格自适应页面显示（支持虚拟化）

要解决MudBlazor表格在非最大化窗口下的适配问题，同时保留虚拟化特性、四周间距和自适应布局，按以下步骤调整：

1. 替换固定高度为动态计算值 #

移除硬编码的Height="680px"，改用基于视口高度（vh）和布局的动态计算高度，确保表格始终适配剩余可用空间，同时避开左侧导航的占用区域。

2. 添加容器实现四周间距 #

用MudContainer或普通div包裹表格，通过margin属性设置四周间距，同时让容器占满可用宽度。

3. 确保虚拟化正常工作 #

虚拟化要求表格有明确的高度，通过父容器的固定高度或动态绑定的计算值满足这一条件。

完整代码示例 #

<!-- 用MudContainer实现四周间距，同时适配左侧导航 -->
<MudContainer Margin="Margin.All.Medium" Style="height: calc(100vh - 100px);">
    <MudTabs>
        <MudTabPanel Text="表格页">
            <MudTable Items="@MyStuff" 
                      Hover="true" 
                      Striped="true" 
                      Virtualize="true" 
                      Breakpoint="Breakpoint.Sm" 
                      FixedHeader="true"
                      Height="100%" 
                      Width="100%">
                <Columns>
                    <!-- 处理Dictionary的Key列 -->
                    <MudTableColumn Field="@((KeyValuePair<string, string> x) => x.Key)" 
                                    Title="Key" />
                    <!-- 处理长文本Value列，自动换行避免溢出 -->
                    <MudTableColumn Field="@((KeyValuePair<string, string> x) => x.Value)" 
                                    Title="Value">
                        <CellTemplate>
                            <MudText Typo="Typo.Body1" Wrap="Wrap.Wrap">@context.Value</MudText>
                        </CellTemplate>
                    </MudTableColumn>
                </Columns>
            </MudTable>
        </MudTabPanel>
    </MudTabs>
</MudContainer>

@code {
    // 示例数据
    private Dictionary<string, string> MyStuff = new()
    {
        {"Key1", "超长文本内容，这里可以放大量数据，测试自动换行效果..."},
        {"Key2", "更多超长文本内容，确保表格不会因为内容过长而横向溢出..."}
    };
}

关键细节说明 #

• calc(100vh - 100px)：100vh代表整个视口高度，减去的100px需根据你的顶部导航栏高度+额外上下间距调整（默认Blazor导航栏约64px，可按需修改）。
• Height="100%"：表格占满父容器的高度，满足虚拟化对明确高度的要求。
• Wrap="Wrap.Wrap"：让Value列的长文本自动换行，避免表格横向溢出。
• 若左侧导航支持折叠/展开，可绑定导航的Collapsed状态动态调整容器宽度：

  @inject MainLayout Layout
  
  <MudContainer Margin="Margin.All.Medium" 
                Style="@($"height: calc(100vh - 100px); width: {Layout.NavCollapsed ? "calc(100% - 64px)" : "calc(100% - 250px)"}")">
      <!-- 表格内容 -->
  </MudContainer>
  

  （需在MainLayout中暴露NavCollapsed属性）

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