Material-table点击onBulkUpdate后图标未切换，无提交/取消操作

你遇到的问题核心是列未配置可编辑属性，批量编辑模式下需要列明确支持编辑，否则进入模式后既无法修改单元格，也不会显示提交/取消操作按钮。

修改步骤： #

• 给每一列添加editable: true属性，声明该列允许批量编辑
• 在onBulkUpdate中补充实际的数据更新逻辑（示例中已添加本地state更新代码）

修改后的完整代码： #

import { useState } from 'react';
import MaterialTable from 'material-table';

const YourComponent = () => {
  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name', editable: true },
    {
      title: 'Surname',
      field: 'surname',
      editable: true,
    },
    { title: 'Birth Year', field: 'birthYear', editable: true },
    {
      title: 'Birth Place',
      field: 'birthCity',
      lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
      editable: true,
    },
  ]);
  const [data, setData] = useState([
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
  ]);

  return (
    <div>
      <MaterialTable
        title='Bulk Edit Preview'
        columns={columns}
        data={data}
        editable={{
          onBulkUpdate: (changes) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                // 替换为你的实际更新逻辑（比如接口请求）
                setData(prevData => 
                  prevData.map(row => {
                    const matchedChange = changes.find(c => c.tableData.id === row.tableData.id);
                    return matchedChange ? { ...row, ...matchedChange } : row;
                  })
                );
                resolve();
              }, 1000);
            }),
        }}
      />
    </div>
  );
};

export default YourComponent;

关键说明： #

1. 列的editable: true是开启批量编辑的必要条件，默认列不可编辑，缺少该属性时进入批量模式后不会显示操作按钮
2. 进入批量编辑模式后，顶部会出现**保存（对勾）和取消（叉号）**按钮，点击保存会触发onBulkUpdate并传入所有修改的行数据
3. 示例中的onBulkUpdate补充了本地state更新逻辑，你可以根据需求替换为后端接口请求

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