如何在MUI X Data Grid中按条件隐藏EditIcon

核心思路 #

getActions 方法的参数不仅包含 id，还能直接获取当前行的完整数据 row，你可以通过 row 中的字段判断条件，进而控制Edit按钮的显示或禁用状态。

方案1：满足条件时隐藏Edit按钮 #

修改 getActions 的参数解构，加入 row，然后根据行数据条件决定是否将Edit按钮加入返回的操作数组：

const columns = [
  {
    field: 'actions',
    type: 'actions',
    headerName: '',
    width: 70,
    cellClassName: 'actions',
    // 解构获取当前行数据row
    getActions: ({ id, row }) => {
      const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;

      if (isInEditMode) {
        return [
          <Tooltip title={'Save'}>
            <GridActionsCellItem
              icon={<SaveIcon />}
              label="Save"
              sx={{ color: 'primary.main' }}
              onClick={handleSaveClick(id)}
            />
          </Tooltip>,
          <Tooltip title={'Cancel'}>
            <GridActionsCellItem
              icon={<CancelIcon />}
              label="Cancel"
              className="textPrimary"
              onClick={handleCancelClick(id)}
              color="inherit"
            />
          </Tooltip>,
        ];
      }

      // 初始化操作数组
      const actions = [];
      // 自定义条件：比如当row.status不是"completed"时才显示Edit按钮
      if (row.status !== 'completed') {
        actions.push(
          <Tooltip title={'Edit Order'}>
            <GridActionsCellItem
              icon={<EditIcon />}
              label="Edit Order"
              className="textPrimary"
              onClick={handleEditClick(id)}
              color="inherit"
            />
          </Tooltip>
        );
      }
      // 始终添加Delete按钮
      actions.push(
        <Tooltip title={'Cancel Order'}>
          <GridActionsCellItem
            icon={<DeleteIcon />}
            label="Delete Order"
            onClick={handleDeleteClick(id)}
            color="inherit"
          />
        </Tooltip>
      );

      return actions;
    },
  },
  // 其他列...
];

方案2：满足条件时禁用Edit按钮（保留显示但不可点击） #

如果需要保留按钮显示但禁止交互，给 GridActionsCellItem 添加 disabled 属性，并通过 sx 设置禁用样式：

const columns = [
  {
    field: 'actions',
    type: 'actions',
    headerName: '',
    width: 70,
    cellClassName: 'actions',
    getActions: ({ id, row }) => {
      const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;
      // 自定义禁用条件
      const isEditDisabled = row.status === 'completed';

      if (isInEditMode) {
        return [
          <Tooltip title={'Save'}>
            <GridActionsCellItem
              icon={<SaveIcon />}
              label="Save"
              sx={{ color: 'primary.main' }}
              onClick={handleSaveClick(id)}
            />
          </Tooltip>,
          <Tooltip title={'Cancel'}>
            <GridActionsCellItem
              icon={<CancelIcon />}
              label="Cancel"
              className="textPrimary"
              onClick={handleCancelClick(id)}
              color="inherit"
            />
          </Tooltip>,
        ];
      }

      return [
        <Tooltip title={isEditDisabled ? '无法编辑' : 'Edit Order'}>
          <GridActionsCellItem
            icon={<EditIcon />}
            label="Edit Order"
            className="textPrimary"
            onClick={handleEditClick(id)}
            color="inherit"
            // 设置禁用状态
            disabled={isEditDisabled}
            // 禁用时的样式
            sx={{
              opacity: isEditDisabled ? 0.5 : 1,
              cursor: isEditDisabled ? 'not-allowed' : 'pointer',
            }}
          />
        </Tooltip>,
        <Tooltip title={'Cancel Order'}>
          <GridActionsCellItem
            icon={<DeleteIcon />}
            label="Delete Order"
            onClick={handleDeleteClick(id)}
            color="inherit"
          />
        </Tooltip>,
      ];
    },
  },
  // 其他列...
];

关键说明 #

• 替换示例中的 row.status === 'completed' 为你实际的业务判断条件（比如行数据的某个字段值、状态等）。
• getActions 方法会为每一行单独执行，所以能精准控制每一行的操作按钮状态。

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