如何为Blazor QuickGrid设置固定列宽？

目前Blazor QuickGrid已经支持设置固定列宽，完全可以解决分页切换时宽度波动的问题，具体实现方式如下：

方法一：自定义CSS类强制固定宽度 #

给目标列添加自定义CSS类，再通过样式指定固定宽度：

1. 在列定义中添加Class属性：

   <QuickGrid Items="@yourDataSource">
       <PropertyColumn Property="x => x.Id" Class="fixed-col-id" />
       <PropertyColumn Property="x => x.ProductName" Class="fixed-col-name" />
   </QuickGrid>
   

2. 在全局或组件样式中定义宽度：

   .fixed-col-id {
       width: 80px;
       min-width: 80px;
       max-width: 80px;
   }
   .fixed-col-name {
       width: 250px;
       min-width: 250px;
       max-width: 250px;
   }
   

通过min-width和max-width配合，能彻底锁定列宽，不受内容长度影响。

方法二：使用内置Width属性（新版本支持） #

在较新的QuickGrid版本中，已经直接提供了Width属性用于设置列宽，无需额外CSS：

<QuickGrid Items="@yourDataSource">
    <PropertyColumn Property="x => x.Id" Width="80px" />
    <PropertyColumn Property="x => x.ProductName" Width="250px" />
    <PropertyColumn Property="x => x.Remark" Width="400px" />
</QuickGrid>

这个功能已经从待办状态完成开发，现在可以直接使用。

额外优化：固定网格容器宽度 #

如果希望整个网格的总宽度也保持稳定，可以给QuickGrid的容器设置固定宽度：

.quickgrid {
    width: 800px;
}

配合列的固定宽度，能彻底避免分页切换时的宽度波动问题。

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