Tabulator表格实现按钮点击+右键行唤起行上下文菜单问题求助

需求：在Tabulator表格每行末尾添加按钮，点击该按钮可在按钮下方唤起行上下文菜单；同时右键点击行任意位置也能正常唤起该菜单。

已编写menuButtonFormatter格式化器创建按钮，尝试通过点击事件分发row-contextmenu或contextmenu事件触发菜单，但未生效且控制台无报错。相关代码如下：

按钮格式化器代码 #

var menuButtonFormatter = (cell: any) => {
var menuBtn = document.createElement('button');
          menuBtn.type = 'button';
          menuBtn.innerHTML = '<span class="material-icons" style="color: #707070">more_horiz</span>';
          menuBtn.classList.add('menu-button');
          menuBtn.addEventListener('click', (event) => {
            event.stopImmediatePropagation();
            const myEvent: any = new Event('row-contextmenu');
            myEvent.pageX = event.pageX;
            myEvent.pageY = event.pageY;
            cell.getRow().getElement().dispatchEvent(myEvent);
          });

buttonHolder.appendChild(menuBtn);
          return buttonHolder;

        }

列配置代码 #

{
        title: this.$t('actions'),
        field: 'actions',
        // formatterParams: poParams,
        formatter:menuButtonFormatter,
        headerSort: false,
        width: 110,
        frozen: true,
}

问题分析与解决方案 #

手动创建的row-contextmenu事件缺少Tabulator内部监听器所需的完整属性，导致无法被正确识别。以下两种方案可解决问题：

方案1：直接调用Tabulator内置方法唤起菜单 #

Tabulator行对象提供了showContextMenu方法（适用于v5.0+版本），可直接传入坐标唤起菜单，定位到按钮下方：

var menuButtonFormatter = (cell: any) => {
  // 补充原代码缺失的buttonHolder定义
  const buttonHolder = document.createElement('div');
  const menuBtn = document.createElement('button');
  
  menuBtn.type = 'button';
  menuBtn.innerHTML = '<span class="material-icons" style="color: #707070">more_horiz</span>';
  menuBtn.classList.add('menu-button');
  
  menuBtn.addEventListener('click', (event) => {
    event.stopImmediatePropagation();
    event.preventDefault();
    
    const row = cell.getRow();
    // 获取按钮底部坐标，让菜单显示在按钮下方
    const btnRect = menuBtn.getBoundingClientRect();
    const menuX = btnRect.left + window.scrollX;
    const menuY = btnRect.bottom + window.scrollY;
    
    // 直接调用行对象的上下文菜单唤起方法
    row.showContextMenu(menuX, menuY);
  });

  buttonHolder.appendChild(menuBtn);
  return buttonHolder;
}

方案2：模拟完整右键事件（兼容旧版本） #

如果使用Tabulator旧版本，可模拟包含完整属性的contextmenu事件，确保Tabulator能捕获并触发菜单：

var menuButtonFormatter = (cell: any) => {
  const buttonHolder = document.createElement('div');
  const menuBtn = document.createElement('button');
  
  menuBtn.type = 'button';
  menuBtn.innerHTML = '<span class="material-icons" style="color: #707070">more_horiz</span>';
  menuBtn.classList.add('menu-button');
  
  menuBtn.addEventListener('click', (event) => {
    event.stopImmediatePropagation();
    event.preventDefault();
    
    const rowElement = cell.getRow().getElement();
    // 创建符合规范的右键事件，指定菜单显示在按钮下方
    const contextEvent = new MouseEvent('contextmenu', {
      bubbles: true,
      cancelable: true,
      view: window,
      clientX: event.clientX,
      clientY: event.clientY + menuBtn.offsetHeight,
      pageX: event.pageX,
      pageY: event.pageY + menuBtn.offsetHeight,
      button: 2,
      buttons: 2
    });
    
    rowElement.dispatchEvent(contextEvent);
  });

  buttonHolder.appendChild(menuBtn);
  return buttonHolder;
}

额外注意事项 #

1. 确保表格已正确配置contextMenu选项，示例如下：

const table = new Tabulator('#your-table-id', {
  // 其他表格配置
  contextMenu: [
    {
      label: "编辑行",
      action: (e, row) => row.edit()
    },
    {
      label: "删除行",
      action: (e, row) => row.delete()
    }
    // 更多菜单选项
  ]
});

2. 原代码中buttonHolder变量未定义，需补充创建容器元素。

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