当使用 ag-grid-vue 对表格进行分组设置并重新加载组件后,分组设置中已展开的列继续展开的问题可以通过以下代码进行解决:
在模板中添加 ag-grid-vue 组件并添加分组设置:
在 Vue 实例中设置 columnApi 变量并存储分组设置的信息:
export default {
data() {
return {
columnApi: null,
columnState: []
};
},
methods: {
onGridReady(params) {
this.columnApi = params.columnApi;
this.columnState = this.columnApi.getColumnState();
},
onModelUpdated(params) {
if (this.columnApi) {
this.columnApi.setColumnState(this.columnState);
}
},
onGridReload() {
this.columnState = this.columnApi.getColumnState();
this.columnState.forEach(column => {
if (column.expanded) {
this.columnApi.setColumnGroupOpened(column.colId, true);
}
});
}
}
};
在 onModelUpdated 方法中,保存并存储分组设置信息。在 onGridReload 方法中,重新加载表格时获取已展开的列并重新设置分组展开状态,以保持分组设置的一致性。