我试图在父组件的数据更改时隐藏和取消隐藏 ag-grid 中的所有列。 这是我的子组件
<template>
<v-card>
<v-card-title>
<v-row no-gutters>
<v-col class="text-right">
<v-btn color="blue" outlined @click="hideColumns">hide Format</v-btn>
</v-col>
</v-row>
</v-card-title>
<ag-grid-vue
//
></ag-grid-vue>
</v-card>
</template>
<script>
//All imports of aggrid
export default {
name: "DetailsTable",
props: {
columnDefs: {
type: Array,
default() {
return null;
},
},
rowData: {
type: Array,
default() {
return null;
},
},
},
components: {
"ag-grid-vue": AgGridVue,
},
data() {
return {
agModule: AllModules,
newRowData: [],
gridApi: null,
gridOptions: {},
};
},
watch: {
rowData: function (newVal, oldVal) {
this.newRowData = newVal;
},
columnDefs: function (newval, oldval) {
this.hideColumns();
},
},
methods: {
hideColumns() {
this.gridOptions.columnApi.getAllColumns().forEach((e) => {
this.gridOptions.columnApi.setColumnVisible(e.colId, false); //In that case we hide it
});
},
},
mounted() {
this.newRowData = this.rowData;
this.gridApi = this.gridOptions.api;
},
};
</script>
在父组件中,每当在父组件中调用 api get 时,都会重新初始化
columnDefs and rowData
get。现在再次更改 columnDefs,我想隐藏所有列。
setColumnsVisible()
接受一个数字作为参数,即 Column.colId
。 getAllColumns()
返回一个Column
数组,所以你需要在这里使用for循环
const showAllColumn = () => {
const allColumns = columnApi.getAllColumns().forEach((c) => {
columnApi.setColumnVisible(c.getColId(), true);
});
};
const hideAllColumn = () => {
const allColumns = columnApi.getAllColumns().forEach((c) => {
columnApi.setColumnVisible(c.getColId(), false);
});
};
<button onClick={showAllColumn}>Show all columns</button>
<button onClick={hideAllColumn}>Hide all columns</button>
通过新的更新,您可以执行以下操作:
gridApi?.setColumnsVisible(gridApi?.getAllGridColumns(), true);