Blazor中为Blazorise.DataGrid列末尾添加编辑按钮/图标问题咨询

实现方案 #

你可以通过DataGridColumn的DisplayTemplate属性自定义日期列的渲染内容，在日期值后方直接拼接编辑按钮即可，修改后的代码参考如下：

<DataGrid Data="@ViewModel.SurveyInstances"
          TItem="SurveyInstance"
          Bordered="true"
          ShowPager="false"
          Sortable="true">
    <DataGridColumns>
        <DataGridColumn TItem="SurveyInstance" Field="Partner.Name" Caption="Partner Name" Width="10%"/>
        <DataGridColumn TItem="SurveyInstance" Field="Survey.Title_DE" Caption="Survey Title" Width="10%"/>
        <!-- 改造日期列，自定义单元格显示内容 -->
        <DataGridColumn TItem="SurveyInstance" Field="@nameof(SurveyInstance.Date)" Caption="Date" Width="15%">
            <DisplayTemplate>
                <!-- 渲染原有日期值，可自行调整日期格式化规则 -->
                @context.Date.ToString("yyyy-MM-dd HH:mm")
                <!-- 紧跟编辑按钮，context为当前行对应的SurveyInstance实例 -->
                <Button Color="Color.Primary" Size="Size.Small" Class="ms-2" Clicked="() => EditSurvey(context)">
                    编辑
                </Button>
            </DisplayTemplate>
        </DataGridColumn>
    </DataGridColumns>
</DataGrid>

@code {
    // 自定义编辑逻辑，接收当前行数据作为入参
    private void EditSurvey(SurveyInstance instance)
    {
        // 此处填写你的编辑弹窗跳转、数据赋值等业务逻辑
    }
}

• 如果你需要把编辑按钮单独作为表格最后一列，只需新增一个无绑定字段的DataGridColumn，把按钮逻辑放在该列的DisplayTemplate中即可
• 按钮的样式、点击逻辑可根据你的业务需求自行调整

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