MudMenu作为MudTable右键菜单的异常问题及解决方法咨询

问题描述 #

尝试用MudMenu作为MudTable的右键菜单时，遇到两种有缺陷的实现：

场景1：MudMenu包裹行内列内容 #

菜单能在光标位置打开，但表格列变形，表头与内容不对齐，行间距异常。代码如下：

<MudTable Class="mt-3" Dense Bordered Height="465px"
            ReadOnly="false" HeaderClass="pa-1" Items="dt.Select()"
            T="DataRow" MultiSelection="false" RowClass="pa-0 cursor-pointer" Hover="true" Breakpoint="Breakpoint.None">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Test table</MudText>
    </ToolBarContent>
    <HeaderContent>
        <MudTh Style="text-align:center; white-space:nowrap;"> Date </MudTh>
        <MudTh Style="text-align:center; white-space:nowrap;"> Name </MudTh>
        <MudTh Style="text-align:center; white-space:nowrap;"> ID </MudTh>
        <MudTh></MudTh>
    </HeaderContent>  
    <RowTemplate>
        <MudMenu PositionAtCursor="true" ActivationEvent="MouseEvent.RightClick">
            <ActivatorContent>
                <MudTd DataLabel="Date"> @(DateTime.Parse(context["Date"].ToString()).ToString("dd/MM/yyyy"))</MudTd>
                <MudTd DataLabel="Name"> @context["Name"].ToString()</MudTd>
                <MudTd DataLabel="ID" Style="padding:9px"> @context["ID"].ToString()</MudTd>
            </ActivatorContent>
            <ChildContent>
                <MudMenuItem>Open Menu</MudMenuItem>
            </ChildContent>
        </MudMenu>     
    </RowTemplate>    
</MudTable>

场景2：MudMenu包裹整个表格 #

表格显示正常，但菜单打开位置偏离鼠标光标，常出现在表格外。代码如下：

<MudMenu PositionAtCursor="true" ActivationEvent="MouseEvent.RightClick">
    <ActivatorContent>
        <MudTable Class="mt-3" Dense Bordered Height="465px"
                    ReadOnly="false" HeaderClass="pa-1" Items="dt.Select()"
                    T="DataRow" MultiSelection="false" RowClass="pa-0 cursor-pointer" Hover="true" Breakpoint="Breakpoint.None">
            <ToolBarContent>
                <MudText Typo="Typo.h6">Test table</MudText>
            </ToolBarContent>
            <HeaderContent>
                <MudTh Style="text-align:center; white-space:nowrap;"> Date </MudTh>
                <MudTh Style="text-align:center; white-space:nowrap;"> Name </MudTh>
                <MudTh Style="text-align:center; white-space:nowrap;"> ID </MudTh>
                <MudTh></MudTh>
            </HeaderContent>
            
            <RowTemplate>
                <MudTd DataLabel="Date"> @(DateTime.Parse(context["Date"].ToString()).ToString("dd/MM/yyyy"))</MudTd>
                <MudTd DataLabel="Name"> @context["Name"].ToString()</MudTd>
                <MudTd DataLabel="ID" Style="padding:9px"> @context["ID"].ToString()</MudTd>            
            </RowTemplate>    
        </MudTable>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem>Open Menu</MudMenuItem>
    </ChildContent>
</MudMenu>  

解决方案 #

推荐采用行级右键事件绑定+手动控制MudMenu显示的方式，既保证表格布局正常，又能让菜单精准出现在光标位置：

步骤1：添加全局MudMenu #

在MudTable外放置一个MudMenu，通过绑定变量控制显示状态，关闭自动定位，改用手动设置坐标：

<MudMenu @ref="_rightClickMenu" Visible="@_isMenuOpen" Position="Origin.BottomLeft"
         XOffset="@_menuX" YOffset="@_menuY">
    <MudMenuItem OnClick="() => HandleViewDetail(selectedRow)">查看详情</MudMenuItem>
    <MudMenuItem OnClick="() => HandleDeleteRow(selectedRow)">删除行</MudMenuItem>
</MudMenu>

步骤2：给MudTable行绑定右键事件 #

在RowTemplate中给行元素绑定右键事件，同时阻止浏览器默认右键菜单：

<MudTable ...>
    <!-- 保留原有ToolBarContent、HeaderContent -->
    <RowTemplate>
        <tr @oncontextmenu="(e) => OnRowRightClicked(e, context)" @oncontextmenu:preventDefault>
            <MudTd DataLabel="Date"> @(DateTime.Parse(context["Date"].ToString()).ToString("dd/MM/yyyy"))</MudTd>
            <MudTd DataLabel="Name"> @context["Name"].ToString()</MudTd>
            <MudTd DataLabel="ID"> @context["ID"].ToString()</MudTd>
        </tr>
    </RowTemplate>
</MudTable>

步骤3：实现后台逻辑 #

在代码块中定义变量和方法，处理右键事件、菜单定位和关闭逻辑：

private MudMenu _rightClickMenu;
private bool _isMenuOpen;
private int _menuX;
private int _menuY;
private DataRow selectedRow;

private void OnRowRightClicked(MouseEventArgs e, DataRow row)
{
    selectedRow = row;
    // 获取鼠标客户端坐标，设置菜单位置
    _menuX = (int)e.ClientX;
    _menuY = (int)e.ClientY;
    _isMenuOpen = true;
    StateHasChanged();
}

private void HandleViewDetail(DataRow row)
{
    // 编写查看详情的业务逻辑
    _isMenuOpen = false;
}

private void HandleDeleteRow(DataRow row)
{
    // 编写删除行的业务逻辑
    _isMenuOpen = false;
}

// 点击页面其他区域自动关闭菜单
protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        JS.InvokeVoidAsync("document.addEventListener", "click", () =>
        {
            _isMenuOpen = false;
            InvokeAsync(StateHasChanged);
        });
    }
}

关键说明 #

• 用原生oncontextmenu事件绑定到每行，完全不破坏MudTable的原有布局结构
• 手动设置菜单的XOffset和YOffset，确保菜单精准跟随鼠标光标
• 通过@oncontextmenu:preventDefault禁用浏览器默认右键菜单，避免冲突
• 监听页面点击事件，点击菜单外区域自动关闭菜单，提升交互流畅度

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