如何根据某些条件隐藏 Material UI 上的列？答案

【问题标题】：How to hide a column on Material UI based on certain criteria?如何根据某些条件隐藏 Material UI 上的列？
【发布时间】：2022-09-27 14:32:35
【问题描述】：

我有一个使用 MUI 的数据网格，我遇到了一个用例，如果我没有特定的角色，我需要隐藏其中的一列。这是代码。

const hideColumn = () => {
        const globalAdmin = auth.verifyRole(Roles.Admin);

        if(!globalAdmin){
            return true;
        }
        return false;
    };


const columns = [
        { field: \'id\', headerName: \'ID\', width: 100 },
        { field: \'name\',
          headerName: \'Client code\',
          flex: 1,
          hide: hideColumn,
          renderCell: (params) => {
                    
                    return params.getValue(\"name\");
            },
        },
];

我对为什么这不起作用感到困惑。如果我只使用 hide:true 或 hide:false 它可以工作，但我需要一个 if 语句来首先检查凭据，这不能在 renderCell 中完成（或者至少我无法做到工作）。有谁知道如何正确地做到这一点？

标签： javascript reactjs material-ui

【解决方案1】：

您应该将其称为函数hide: hideColumn()

【讨论】：

另外，如果hideColumn() 被调用，那么它只在第一次渲染时有效。状态应该使用钩子或类似的方式存储以动态呈现。然而。每次重新加载后，此状态不会持续存在。

【解决方案2】：

或者您可以创建一个函数来检索您的列并将道具传递给该函数。然后你只需要根据标准推送你的列：

export default function getColumns (product, isHide, t) {
let columns = [
    {
      field: 'organizationName',
      headerName: headerNameOrganization,
      flex: 0.3,
    },
 ]
  if (!product) {
    columns.push(
      {
        field: 'status',
        headerName: headerNameStatus,
        flex: 0.2,
        filterable: false,
  })
}
return columns
}

【讨论】：

【解决方案3】：

使用 <DataGrid /> 的 prop columnVisibilityModel 来控制列的可见性动态的.

道具也可以有一个监听器。

您可以使用 onColumnVisibilityModelChange 属性来监听可见列的变化并相应地更新属性。 (MUI doc)

起初，我使用initialState（作为ff），但MUI说in their documentation：
initialState 只能用于设置状态的初始值，如果您稍后更改initialState 值，网格将不会做出反应。

如果您需要完全控制特定模型，请改用控制道具...
<DataGrid
  columns={columns}
  rows={rows}
  loading={!users.length}
  initialState={{
      columns: {
          columnVisibilityModel: {
              myColumn1: isAdmin(user),
              myColumn2: isAdmin(user),
          },
     },
  }}
/>

【讨论】：