如何让p-contextMenu仅在p-table选中的对应行右键点击时显示

• 现有逻辑仅校验了是否存在选中行，未判断右键点击的目标行是否为当前选中的行
• 原代码中p-table的dataKey绑定错误：[dataKey]="id"会读取组件实例的id变量，需要改为字符串格式的主键字段名[dataKey]="'id'"才能匹配行数据的主键

HTML代码调整 #

<p-contextMenu #cm [model]="items" appendTo="body"></p-contextMenu>
<p-table 
  #dt 
  [(selection)]="rowSelected" 
  [value]="listOfRows" 
  [contextMenu]="cm" 
  [dataKey]="'id'"
  [columns]="columns"
  (contextmenu)="onContextMenuSelect($event, cm)"
>
<!-- 其余表格模板代码保持原有逻辑即可 -->

TS代码调整 #

onContextMenuSelect(event: any, contextMenu: any){
  // 阻止浏览器默认右键菜单触发
  event.originalEvent.preventDefault();
  event.originalEvent.stopPropagation();

  // 校验：存在选中行 且 右键点击的行就是当前选中的行
  const validTrigger = this.rowSelected && (event.data.id === this.rowSelected.id);
  if (!validTrigger) {
    contextMenu.hide();
    return;
  }
  // 符合条件时上下文菜单会自动弹出，无需额外调用show方法
}

如果你的表格开启了多选模式，rowSelected为数组类型，仅需把校验逻辑调整为如下即可：

const validTrigger = this.rowSelected?.length && this.rowSelected.some(item => item.id === event.data.id);

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