基于Blazor嵌套组件实现简易表格网格的技术问询

1. 先定义核心配置类 #

用两个类来统一管理表格和列的配置，把数据源、列字段、组件类型这些信息都存进去：

public class TableColumnConfig
{
    // 绑定DataTable里的字段名
    public string FieldName { get; set; }
    // 列的显示标题
    public string DisplayName { get; set; }
    // 要渲染的组件类型：TextBox/DropdownList
    public string ComponentType { get; set; }
    // 下拉框的选项集合（仅DropdownList需要）
    public IEnumerable<SelectListItem> DropdownOptions { get; set; }
}

public class TableNodeConfig
{
    // 表格的数据源
    public DataTable DataSource { get; set; }
    // 列配置集合，支持任意数量
    public List<TableColumnConfig> Columns { get; set; } = new List<TableColumnConfig>();
}

2. 写TableColumn子组件 #

这个组件负责根据配置渲染对应的输入控件，同时处理数据的读取和更新：

<td>
    @switch(ColumnConfig.ComponentType)
    {
        case "TextBox":
            <input type="text" value="@GetFieldValue(Item)" 
                   @onchange="UpdateFieldValue" 
                   class="form-control form-control-sm" />
            break;
        case "DropdownList":
            <select value="@GetFieldValue(Item)" 
                    @onchange="UpdateFieldValue" 
                    class="form-select form-select-sm">
                @foreach(var option in ColumnConfig.DropdownOptions)
                {
                    <option value="@option.Value">@option.Text</option>
                }
            </select>
            break;
        default:
            <span>@GetFieldValue(Item)</span>
            break;
    }
</td>

@code {
    [Parameter] public TableColumnConfig ColumnConfig { get; set; }
    [Parameter] public DataRow Item { get; set; }

    private string GetFieldValue(DataRow row)
    {
        return row[ColumnConfig.FieldName]?.ToString() ?? string.Empty;
    }

    private void UpdateFieldValue(ChangeEventArgs e)
    {
        Item[ColumnConfig.FieldName] = e.Value;
    }
}

3. 写TableNode主组件 #

主组件负责把整个表格拼起来，遍历DataTable的行和配置的列：

@if(Config.DataSource == null || Config.Columns.Count == 0)
{
    <div class="alert alert-warning">无数据或未配置列</div>
}
else
{
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                @foreach(var column in Config.Columns)
                {
                    <th>@column.DisplayName</th>
                }
            </tr>
        </thead>
        <tbody>
            @foreach(DataRow row in Config.DataSource.Rows)
            {
                <tr>
                    @foreach(var column in Config.Columns)
                    {
                        <TableColumn ColumnConfig="column" Item="row" />
                    }
                </tr>
            }
        </tbody>
    </table>
}

@code {
    [Parameter] public TableNodeConfig Config { get; set; }
}

4. 页面使用示例 #

在Blazor页面里配置数据源和列，直接引用TableNode组件就行：

@page "/demo"
@using System.Data
@using Microsoft.AspNetCore.Components.Forms

<h3>自定义表格演示</h3>

<button class="btn btn-primary mb-3" @onclick="LoadSampleData">加载示例数据</button>

<TableNode Config="@_tableConfig" />

@code {
    private TableNodeConfig _tableConfig = new TableNodeConfig();

    private void LoadSampleData()
    {
        // 构造示例DataTable
        var dt = new DataTable();
        dt.Columns.Add("Id", typeof(int));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Status", typeof(string));

        dt.Rows.Add(1, "张三", "Active");
        dt.Rows.Add(2, "李四", "Inactive");
        dt.Rows.Add(3, "王五", "Active");

        // 配置列：可以加任意数量的TableColumn
        _tableConfig.Columns = new List<TableColumnConfig>
        {
            new()
            {
                FieldName = "Id",
                DisplayName = "编号",
                ComponentType = "TextBox"
            },
            new()
            {
                FieldName = "Name",
                DisplayName = "姓名",
                ComponentType = "TextBox"
            },
            new()
            {
                FieldName = "Status",
                DisplayName = "状态",
                ComponentType = "DropdownList",
                DropdownOptions = new List<SelectListItem>
                {
                    new() { Text = "激活", Value = "Active" },
                    new() { Text = "禁用", Value = "Inactive" }
                }
            }
        };

        _tableConfig.DataSource = dt;
        StateHasChanged();
    }
}

核心逻辑说明 #

• 用配置类把列的所有属性统一管理，新增列只需要加一条配置就行
• 子组件根据ComponentType动态渲染对应的输入控件，数据直接绑定到DataRow，修改后实时同步到DataTable
• 主组件只负责遍历数据源和列配置，渲染完整表格结构

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