如何在material-table的操作列添加自定义下拉操作菜单

核心实现思路 #

• 直接复用 Material-UI 原生的Menu、MenuItem组件即可，无需修改material-table内置列配置逻辑，也不需要额外引入第三方菜单库
• 操作列不使用material-table默认的图标按钮，自定义渲染带三点标识的操作触发按钮，绑定点击事件时记录当前触发的行数据、锚点元素
• 菜单显隐通过本地state统一控制，选中菜单项后执行对应业务逻辑，执行完成后关闭菜单重置状态
• 最终效果和参考截图完全一致：操作列固定显示「更多操作」按钮，点击后弹出垂直菜单列表，每个菜单项可绑定对应行的独立操作逻辑

可直接复用的代码示例 #

先确认项目已安装对应依赖：@material-ui/core、material-table

import React, { useState } from 'react';
import MaterialTable from 'material-table';
import { Menu, MenuItem, IconButton } from '@material-ui/core';
import MoreVertIcon from '@material-ui/icons/MoreVert';

export default function CustomActionMenuTable() {
  // 统一管理菜单状态：锚点元素、当前操作行数据、显隐状态
  const [menuState, setMenuState] = useState({
    anchorEl: null,
    currentRow: null,
    open: false
  });

  // 打开菜单
  const handleOpenMenu = (event, rowData) => {
    setMenuState({
      anchorEl: event.currentTarget,
      currentRow: rowData,
      open: true
    });
  };

  // 关闭菜单
  const handleCloseMenu = () => {
    setMenuState({
      anchorEl: null,
      currentRow: null,
      open: false
    });
  };

  // 菜单项点击业务逻辑
  const handleMenuAction = (actionType) => {
    // menuState.currentRow 即为当前操作的行数据，直接对接业务逻辑即可
    switch(actionType) {
      case 'edit':
        console.log('编辑当前行：', menuState.currentRow);
        // 自定义编辑逻辑
        break;
      case 'delete':
        console.log('删除当前行：', menuState.currentRow);
        // 自定义删除逻辑
        break;
      case 'export':
        console.log('导出当前行数据：', menuState.currentRow);
        // 自定义导出逻辑
        break;
      default:
        break;
    }
    handleCloseMenu();
  };

  return (
    <>
      <MaterialTable
        title="带自定义操作菜单的表格"
        columns={[
          { title: '姓名', field: 'name' },
          { title: '邮箱', field: 'email' },
          { title: '角色', field: 'role' },
        ]}
        data={[
          { name: '张三', email: 'zhangsan@test.com', role: '管理员' },
          { name: '李四', email: 'lisi@test.com', role: '普通用户' },
          { name: '王五', email: 'wangwu@test.com', role: '访客' },
        ]}
        // *核心配置：自定义操作列渲染*
        actions={[
          {
            render: (rowData) => (
              <IconButton
                aria-label="更多操作"
                onClick={(e) => handleOpenMenu(e, rowData)}
              >
                <MoreVertIcon />
              </IconButton>
            ),
            position: 'row'
          }
        ]}
        options={{
          actionsColumnIndex: -1, // 将操作列固定在表格最右侧
          search: true,
          paging: true
        }}
      />
      {/* 自定义下拉菜单组件 */}
      <Menu
        anchorEl={menuState.anchorEl}
        open={menuState.open}
        onClose={handleCloseMenu}
        keepMounted
      >
        <MenuItem onClick={() => handleMenuAction('edit')}>编辑</MenuItem>
        <MenuItem onClick={() => handleMenuAction('delete')}>删除</MenuItem>
        <MenuItem onClick={() => handleMenuAction('export')}>导出数据</MenuItem>
        {/* 可根据业务需求任意增减菜单项 */}
      </Menu>
    </>
  );
}

常用调整说明 #

• 若需要给菜单项加图标，直接在MenuItem标签内和文字并列放入对应Material-UI图标组件即可
• 若需要根据行数据动态显示/隐藏菜单项，渲染MenuItem时增加判断逻辑即可，例如{menuState.currentRow?.role === '管理员' && <MenuItem>权限配置</MenuItem>}
• 若需要调整菜单弹出位置，给Menu组件添加anchorOrigin、transformOrigin属性配置偏移量即可
• 若使用MUI v5+版本，仅需将导入路径从@material-ui/core替换为@mui/material、图标导入路径替换为@mui/icons-material，核心逻辑无需修改

之前相关讨论帖的代码沙盒无法访问，大多是因为原作者删除示例、或依赖版本过旧导致沙盒启动失败，上述代码基于material-table 1.69.x稳定版本编写，复制到项目后修改列配置和业务逻辑即可直接运行。

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