基于反应材料表中的行数据的行动作

Question

我只需要在某些行（具有特定属性值）中进行行操作。例如，如果我有一个属性“isDeletable”设置为 true 的行，我希望能够删除它，即在操作列中有一个删除图标。

提前致谢！

Answer 1

在MaterialTable 组件的actions 定义中，您可以访问rowData 参数，您可以使用该参数有条件地计算每个动作的disabled 或hidden 属性。检查以下示例，其中仅在 status ==='active' 时启用操作。

<MaterialTable
// ..other props
actions={[
          (rowData) => {
            return {
              icon: "bug_report",
              tooltip: "Report bug",
              disabled: rowData.status === "active",
              // hidden: rowData.status === "active",
              onClick: (event, rowData) =>
                alert("This client status is " + rowData.status)
            };
          }
        ]}
/>

这是一个 sandbox 带有一个工作示例。

如果这对你有用，请告诉我！