@mui/x-data-grid-pro提供的回调函数用于跟踪我所知道的可见列，如下所示：
onColumnVisibilityChange={(params, event, details) => console.log(params, event, details.api.getVisibleColumns()) }
当单个列被切换时触发OK，但是在显示/隐藏所有按钮点击时不触发此事件。对此是否有已知的变通方案？
a8jjtwal1#
问题是onColumnVisibilityChange回调函数只提供单个可见性更改的信息，而不是由显示/隐藏所有列的批量可见性更改触发的。由于@mui/x-data-grid-pro v5.3.0，网格提供了额外的回调函数onColumnVisibilityModelChange：
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属性配合使用，可以控制网格列的可见性：
params
columnName: boolean
columnVisibilityModel
<DataGrid columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={newModel => setColumnVisibilityModel(newModel)} />
1条答案
按热度按时间a8jjtwal1#
问题是
onColumnVisibilityChange回调函数只提供单个可见性更改的信息，而不是由显示/隐藏所有列的批量可见性更改触发的。由于@mui/x-data-grid-pro v5.3.0，网格提供了额外的回调函数onColumnVisibilityModelChange：params对象包含有关表中所有列的可见性的信息（作为键值对（columnName: boolean））。onColumnVisibilityModelChange回调由单列可见性更改和批量可见性更改触发。通过与columnVisibilityModeldatagrid属性配合使用，可以控制网格列的可见性：