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

能否为继承层级类编写通用的MudBlazor.MudDataGrid组件?

可行性说明

完全可行。MudDataGrid支持泛型和动态列渲染机制,能够很好地适配继承层级的类结构,只需通过通用组件+动态列的方式即可实现一套组件处理所有子类数据。

实现步骤

1. 定义继承层级的实体类

先构建基础抽象类和子类,确保子类继承自抽象类并扩展自身属性:

public abstract class Person
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public int Age { get; set; }
}

public class Staff : Person
{
    public string EmployeeId { get; set; } = string.Empty;
    public string Department { get; set; } = string.Empty;
}

public class Customer : Person
{
    public string CustomerNumber { get; set; } = string.Empty;
    public string PurchaseHistory { get; set; } = string.Empty;
}

public class User : Person
{
    public string Username { get; set; } = string.Empty;
    public string Role { get; set; } = string.Empty;
}

2. 创建通用MudDataGrid组件

编写泛型组件,约束泛型参数为Person的子类,同时支持传入不同子类的数据集:

@typeparam T where T : Person

<MudDataGrid T="T" Items="@Items" Hover="true" Striped="true">
    <Columns>
        <!-- 渲染Person类的公共列 -->
        <PropertyColumn Property="x => x.Id" Title="ID" />
        <PropertyColumn Property="x => x.Name" Title="姓名" />
        <PropertyColumn Property="x => x.Age" Title="年龄" />

        <!-- 根据子类类型动态渲染专属列 -->
        @if (typeof(T) == typeof(Staff))
        {
            <PropertyColumn Property="x => ((Staff)x).EmployeeId" Title="员工编号" />
            <PropertyColumn Property="x => ((Staff)x).Department" Title="部门" />
        }
        @if (typeof(T) == typeof(Customer))
        {
            <PropertyColumn Property="x => ((Customer)x).CustomerNumber" Title="客户编号" />
            <PropertyColumn Property="x => ((Customer)x).PurchaseHistory" Title="购买记录" />
        }
        @if (typeof(T) == typeof(User))
        {
            <PropertyColumn Property="x => ((User)x).Username" Title="用户名" />
            <PropertyColumn Property="x => ((User)x).Role" Title="角色" />
        }
    </Columns>
</MudDataGrid>

@code {
    [Parameter, Required]
    public IEnumerable<T> Items { get; set; } = Enumerable.Empty<T>();
}

3. 在页面中使用通用组件

直接传入不同子类的数据集即可自动渲染对应列:

<PersonDataGrid T="Staff" Items="@StaffList" />
<PersonDataGrid T="Customer" Items="@CustomerList" />
<PersonDataGrid T="User" Items="@UserList" />

@code {
    private List<Staff> StaffList = new()
    {
        new Staff { Id = 1, Name = "张三", Age = 30, EmployeeId = "EMP001", Department = "技术部" },
        new Staff { Id = 2, Name = "李四", Age = 32, EmployeeId = "EMP002", Department = "人事部" }
    };

    private List<Customer> CustomerList = new()
    {
        new Customer { Id = 3, Name = "王五", Age = 28, CustomerNumber = "CUS001", PurchaseHistory = "累计下单5次" },
        new Customer { Id = 4, Name = "赵六", Age = 35, CustomerNumber = "CUS002", PurchaseHistory = "累计下单12次" }
    };

    private List<User> UserList = new()
    {
        new User { Id = 5, Name = "孙七", Age = 25, Username = "sunqi", Role = "普通用户" },
        new User { Id = 6, Name = "周八", Age = 29, Username = "zhouba", Role = "管理员" }
    };
}

4. 进阶:自动检测子类属性(可选)

如果子类数量较多,手动判断类型会繁琐,可以通过反射自动获取子类的额外属性并生成列:

@typeparam T where T : Person

<MudDataGrid T="T" Items="@Items" Hover="true" Striped="true">
    <Columns>
        <PropertyColumn Property="x => x.Id" Title="ID" />
        <PropertyColumn Property="x => x.Name" Title="姓名" />
        <PropertyColumn Property="x => x.Age" Title="年龄" />

        <!-- 自动渲染子类专属列 -->
        @foreach (var prop in GetExtraProperties())
        {
            <DynamicColumn Title="@prop.Name">
                @prop.GetValue(context)
            </DynamicColumn>
        }
    </Columns>
</MudDataGrid>

@code {
    [Parameter, Required]
    public IEnumerable<T> Items { get; set; } = Enumerable.Empty<T>();

    // 获取子类中不属于Person的属性
    private List<PropertyInfo> GetExtraProperties()
    {
        var baseProps = typeof(Person).GetProperties().Select(p => p.Name).ToList();
        return typeof(T).GetProperties()
            .Where(p => !baseProps.Contains(p.Name))
            .ToList();
    }
}
注意事项
  • 确保子类的属性为公共访问级别,否则反射无法获取
  • 如果需要编辑功能,需在编辑模板中通过类型判断渲染对应输入组件
  • 分页、排序、筛选等MudDataGrid原生功能对泛型集合完全兼容,无需额外适配

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.04 12:32:05