reactjs Mui Data Grid Pro v4,单击“全部显示”/“全部隐藏"时不会触发列可见性事件

uz75evzq  于 2023-02-18  发布在  React
关注(0)|答案(1)|浏览(125)

@mui/x-data-grid-pro提供的回调函数用于跟踪我所知道的可见列,如下所示:

onColumnVisibilityChange={(params, event, details) =>
  console.log(params, event, details.api.getVisibleColumns())
}

当单个列被切换时触发OK,但是在显示/隐藏所有按钮点击时不触发此事件。
对此是否有已知的变通方案?

a8jjtwal

a8jjtwal1#

问题是onColumnVisibilityChange回调函数只提供单个可见性更改的信息,而不是由显示/隐藏所有列的批量可见性更改触发的。由于@mui/x-data-grid-pro v5.3.0,网格提供了额外的回调函数onColumnVisibilityModelChange

onColumnVisibilityModelChange={(params: GridColumnVisibilityModel,  event: MuiEvent<{}>, details: GridCallbackDetails) => {
    console.log(params)
}}

params对象包含有关表中所有列的可见性的信息(作为键值对(columnName: boolean))。onColumnVisibilityModelChange回调由单列可见性更改和批量可见性更改触发。通过与columnVisibilityModel datagrid属性配合使用,可以控制网格列的可见性:

<DataGrid
    columnVisibilityModel={columnVisibilityModel}
    onColumnVisibilityModelChange={newModel => setColumnVisibilityModel(newModel)}
/>

相关问题