You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MudBlazor DataGrid:TemplateColumn如何配置筛选功能?

解决MudDataGrid TemplateColumn筛选下拉为空的问题

核心原因是TemplateColumn不像PropertyColumn会自动绑定属性生成筛选选项,需要显式配置筛选关联的字段:

  • 给TemplateColumn添加FilterBy参数,指定筛选依赖的属性,和SortBy保持一致:

    <TemplateColumn Sortable="true" Filterable="true" 
                    SortBy="x => x.OrganisationName" 
                    FilterBy="x => x.OrganisationName">
        <!-- 原有模板内容 -->
    </TemplateColumn>
    
  • 如果设置后下拉仍无数据,可手动指定筛选选项数据源:

    1. 在组件代码中提取唯一的选项值:
      private IEnumerable<string> _organisationFilterOptions => 
          companies.Select(c => c.OrganisationName)
                   .Distinct()
                   .OrderBy(x => x);
      
    2. 给TemplateColumn添加FilterOptions参数:
      <TemplateColumn Sortable="true" Filterable="true" 
                      SortBy="x => x.OrganisationName" 
                      FilterBy="x => x.OrganisationName"
                      FilterOptions="@_organisationFilterOptions">
          <!-- 原有模板内容 -->
      </TemplateColumn>
      

修改后的完整代码示例:

<MudDataGrid T="Company" MultiSelection="true" Items="@companies" SortMode="SortMode.Multiple" Filterable="true" 
             Hideable="true">
    <Columns>
        <TemplateColumn Sortable="true" Filterable="true" 
                        SortBy="x => x.OrganisationName" 
                        FilterBy="x => x.OrganisationName"
                        FilterOptions="@_organisationFilterOptions">
            <HeaderTemplate>
                Organisation
            </HeaderTemplate>
            <CellTemplate>
                <!-- 你的HTML内容 -->
            </CellTemplate>
        </TemplateColumn>
     </Columns>
</MudDataGrid>

内容的提问来源于stack exchange,提问作者user26850114

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.19 10:52:06