如何在Material UI表格TableCell中添加操作按钮（Next.js项目）

下面是具体的实现方案，直接修改你的代码即可：

1. 补充导入所需组件 #

首先需要导入Material UI的按钮和图标组件，替换原import部分：

"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableRow,
  IconButton,
} from "@mui/material";
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import React, { useState } from "react";

2. 添加操作处理函数 #

在组件内部添加编辑和删除的处理逻辑，你可以根据业务需求完善：

const handleEdit = (row) => {
  // 自定义编辑逻辑，比如跳转到编辑页面、打开编辑弹窗
  console.log("编辑预约记录:", row);
};

const handleDelete = (row) => {
  // 自定义删除逻辑，比如调用API删除、弹窗确认
  if (window.confirm(`确定要删除${row.name}的预约记录吗？`)) {
    console.log("删除预约记录:", row);
    // 后续可调用MongoDB删除接口完成操作
  }
};

3. 修改表格单元格渲染逻辑 #

在渲染TableCell时，判断当前列是否为action列，若是则渲染按钮，否则显示对应数据：

<TableRow key={row._id || i}> {/* 用MongoDB文档的唯一ID作为key，无ID则用索引 */}
  {columns &&
    columns.map((column, j) => {
      let value = row[column.id];
      return (
        <TableCell key={`${row._id || i}-${j}`}> {/* 确保每个单元格key唯一 */}
          {column.id === "action" ? (
            <>
              <IconButton color="primary" onClick={() => handleEdit(row)} size="small">
                <EditIcon />
              </IconButton>
              <IconButton color="error" onClick={() => handleDelete(row)} size="small">
                <DeleteIcon />
              </IconButton>
              {/* 若偏好文字按钮，可替换为：
              <Button variant="outlined" size="small" onClick={() => handleEdit(row)} style={{marginRight: 8}}>
                编辑
              </Button>
              <Button variant="outlined" size="small" color="error" onClick={() => handleDelete(row)}>
                删除
              </Button>
              */}
            </>
          ) : (
            value
          )}
        </TableCell>
      );
    })}
</TableRow>

完整修改后的代码 #

"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableRow,
  IconButton,
} from "@mui/material";
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import React, { useState } from "react";

const TableAppointment = (props) => {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  const handleEdit = (row) => {
    // 自定义编辑逻辑，例如跳转到带记录ID的编辑页面
    console.log("编辑预约:", row);
  };

  const handleDelete = (row) => {
    // 自定义删除逻辑，例如调用MongoDB删除接口
    if (window.confirm(`确定删除${row.name}的预约吗？`)) {
      console.log("删除预约:", row);
      // 这里可添加调用后端删除接口的代码
    }
  };

  const columns = [
    { id: "index", name: "#" },
    { id: "name", name: "Nama" },
    { id: "date", name: "Tanggal" },
    { id: "phone", name: "No Telp." },
    { id: "terapist", name: "Terapis" },
    { id: "statust", name: "Status" },
    { id: "action", name: "Action" },
  ];

  return (
    <div>
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              {columns.map((column) => (
                <TableCell key={column.id}>{column.name}</TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {props.appointment
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row, i) => {
                return (
                  <TableRow key={row._id || i}>
                    {columns &&
                      columns.map((column, j) => {
                        let value = row[column.id];
                        return (
                          <TableCell key={`${row._id || i}-${j}`}>
                            {column.id === "action" ? (
                              <>
                                <IconButton color="primary" onClick={() => handleEdit(row)} size="small">
                                  <EditIcon />
                                </IconButton>
                                <IconButton color="error" onClick={() => handleDelete(row)} size="small">
                                  <DeleteIcon />
                                </IconButton>
                              </>
                            ) : (
                              value
                            )}
                          </TableCell>
                        );
                      })}
                  </TableRow>
                );
              })}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        rowsPerPageOptions={[10, 25, 100]}
        component="div"
        count={props.appointment.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
    </div>
  );
};

export default TableAppointment;

说明 #

• 用IconButton搭配图标是Material UI表格操作列的常用样式，若偏好文字按钮，可切换为注释中的普通Button代码。
• handleEdit和handleDelete内的逻辑需结合你的业务完善，比如编辑可跳转至带记录ID的页面，删除可调用MongoDB的删除接口。
• 修复了原代码中key重复的问题，改用文档唯一ID或索引拼接列索引，避免React渲染警告。

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