Blazor WASM实现仅选中表格行可编辑的问题求助

问题根源是你大概率用了单个布尔变量控制所有行的编辑状态，点击任意一行的Edit按钮时，所有行都会同步切换状态。要实现仅当前行可编辑，你需要给每行单独维护编辑状态，具体实现步骤如下：

1. 定义状态跟踪集合 #

在组件中新增一个Dictionary<TKey, bool>（TKey是你原Dictionary的键类型，比如int/string），用来存储每个字典项的编辑状态：

@code {
    // 你的原字典数据示例
    private Dictionary<int, string> MyData = new()
    {
        {1, "第一行内容"},
        {2, "第二行内容"},
        {3, "第三行内容"}
    };

    // 跟踪每行编辑状态，键与原字典一致，值表示是否处于编辑状态
    private Dictionary<int, bool> EditStates = new();
}

2. 渲染表格时绑定对应状态 #

遍历原字典时，根据EditStates中当前键的状态，决定显示静态文本还是可编辑输入框：

<table class="table">
    <thead>
        <tr>
            <th>Key</th>
            <th>内容</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in MyData)
        {
            <tr>
                <td>@item.Key</td>
                <td>
                    @if (EditStates.TryGetValue(item.Key, out bool isEditing) && isEditing)
                    {
                        <input type="text" @bind="@MyData[item.Key]" class="form-control" />
                    }
                    else
                    {
                        @item.Value
                    }
                </td>
                <td>
                    @if (EditStates.TryGetValue(item.Key, out bool isEditing) && isEditing)
                    {
                        <button class="btn btn-sm btn-success" @onclick="() => SaveEdit(item.Key)">保存</button>
                        <button class="btn btn-sm btn-secondary ms-1" @onclick="() => CancelEdit(item.Key)">取消</button>
                    }
                    else
                    {
                        <button class="btn btn-sm btn-primary" @onclick="() => StartEdit(item.Key)">编辑</button>
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

3. 实现编辑状态切换方法 #

在@code块中添加三个方法，分别处理开始编辑、保存、取消的逻辑：

@code {
    // ... 前面的变量定义
    
    private void StartEdit(int key)
    {
        // 将当前行设为可编辑状态
        EditStates[key] = true;
    }

    private void SaveEdit(int key)
    {
        // 这里可添加数据提交逻辑（比如调用API）
        // 关闭当前行的编辑状态
        EditStates[key] = false;
    }

    private void CancelEdit(int key)
    {
        // 若需要还原数据，可在这里重置MyData[key]的原始值
        // 关闭当前行的编辑状态
        EditStates[key] = false;
    }
}

补充说明 #

• 如果你的原字典值是自定义实体类（比如Dictionary<int, User>），逻辑完全一致，只需将输入框绑定到实体属性即可（例如@bind="@MyData[item.Key].UserName"）。
• 初始状态下EditStates为空，TryGetValue会返回false，默认显示静态文本，无需提前初始化所有键的状态，点击编辑时再自动添加对应键的状态即可。

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