如何在Blazorise DataGrid的Operation列添加点击显示Edit/View下拉列表

要实现点击Operation列显示包含Edit、View的下拉列表，你可以直接在DataGridColumn中嵌入Blazorise的Dropdown组件，具体修改如下：

核心修改点 #

• 移除Operation列的Field绑定，改用CellTemplate自定义列内容
• 嵌入Dropdown组件，设置触发按钮和下拉选项
• 为Edit、View选项添加点击事件，处理对应业务逻辑

修改后的完整代码 #

<Div Class="mt-3">
    <DataGrid TItem="Employee"
              Data="@employeeList"
              @bind-SelectedRow="@selectedEmployee"
              PageSize="5"
              Responsive="true"
              ShowPager="true"
              Resizable
              Bordered="true"
              Striped="true"
              Hoverable="true">
        <DataGridColumns>
            <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
            <DataGridColumn Field="@nameof(Employee.UserGroupName)" Caption="Group Name" />
            <DataGridColumn Field="@nameof(Employee.UserName)" Caption="Last Name" />
            <DataGridColumn Field="@nameof(Employee.PermissionType)" Caption="Permission Type" />
            <DataGridColumn Caption="Operation">
                <CellTemplate>
                    <Dropdown>
                        <DropdownToggle Color="Color.Primary">
                            Operation
                        </DropdownToggle>
                        <DropdownMenu>
                            <DropdownItem Clicked="@(() => HandleEdit(context.Item))">
                                Edit
                            </DropdownItem>
                            <DropdownItem Clicked="@(() => HandleView(context.Item))">
                                View
                            </DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </CellTemplate>
            </DataGridColumn>
        </DataGridColumns>
    </DataGrid>
</Div>
@* END TRUSTED USER LIST*@

</CardBody></Card>
</Column>
</Row>
</Div>

@code{
    private List<Employee> employeeList;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        employeeList = new List<Employee>()
        {
            new Employee{ Id="1",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com"},
            new Employee{ Id="2",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com"},
            new Employee{ Id="3",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com"},
            new Employee{ Id="4",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com"},
            new Employee{ Id="5",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com"},
            new Employee{ Id="6",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com"},     
            new Employee{ Id="7",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com"},      
            new Employee{ Id="8",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com"},      
            new Employee{ Id="9",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com"},
            new Employee{ Id="10",UserGroupName="Tesxt",UserName="test1",PermissionType="test@gmail.com"},
        };
        await base.OnInitializedAsync();
    }

    private void HandleEdit(Employee employee)
    {
        // 编写编辑逻辑，比如打开编辑弹窗、传递员工数据等
        selectedEmployee = employee;
    }

    private void HandleView(Employee employee)
    {
        // 编写查看逻辑，比如打开详情弹窗、展示员工数据等
        selectedEmployee = employee;
    }

    public class Employee
    {
        public string Id { get; set; }
        public string UserGroupName { get; set; }
        public string UserName { get; set; }
        public string PermissionType { get; set; }
        // 移除无用的Operation字段
    }
}

说明 #

• 通过CellTemplate自定义列内容，嵌入Dropdown组件实现下拉菜单
• 利用context.Item获取当前行对应的Employee对象，传递给操作方法
• HandleEdit和HandleView方法可根据业务需求扩展，比如调用API、打开模态框等

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