如何在 Material-Table 中实现批量编辑答案

【问题标题】：How to achieve Bulk Editing in Material-Table如何在 Material-Table 中实现批量编辑
【发布时间】：2020-12-27 20:34:12
【问题描述】：

批量编辑是一项要求的功能，但当前material-table 库只有打开多个编辑的选项，但一次只能编辑一行，我如何才能实现批量编辑？同时编辑多行？

【问题讨论】：

标签： reactjs material-ui material-table

【解决方案1】：

我通过使用onSelectionChange 函数创建一个处理选定行的状态来实现这一点。

const [allSelectedRows, setAllSelectedRows] = useState([]);

onSelectionChange={(rows) => {
  setAllSelectedRows([...rows]);
}}

之后我生成了一个差异（使用deep-object-diff）来查看这些选定行中发生了什么变化，生成了一个包含新数据的数组并更新了状态。

editable={{
  isEditable: (rowData) => data[rowData.tableData.id].Locked !== true,
  onRowUpdate: (newData, oldData) => new Promise((resolve) => {
    const dataUpdateArray = [...data];
    if (allSelectedRows.length && allSelectedRows.includes(oldData)) {// if there is multiple checkboxes selected
      const updatedData = updatedDiff(oldData, newData);
      allSelectedRows.map((item) => {
        return Object.assign(dataUpdateArray[item.tableData.id], updatedData);
      });
    } else {// if there is no selected checkbox, you are editing a non-checked row
      dataUpdateArray[oldData.tableData.id] = newData;
    }
    setData([...dataUpdateArray]);
    resolve();
  }),
}}

关于实现的更多细节，这里是stackblitz，其中包含实现此功能所需的所有代码。

【讨论】：