[英]Vue Ag-grid hide/unhide all columns at once
I am trying to hide and unhide all columns in ag-grid on data change from the parent component.我试图在父组件的数据更改时隐藏和取消隐藏 ag-grid 中的所有列。 This is my child component
这是我的子组件
<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>
In the parent component the columnDefs and rowData
get's reinitialized whenever the api get's called in the parent component.在父组件中,只要在父组件中调用 api get,就会重新初始化
columnDefs and rowData
get。 And now again on the change of columnDefs I want to hide all the columns.现在再次更改 columnDefs 我想隐藏所有列。
setColumnsVisible()
accepts a number as an argument which is a Column.colId
. setColumnsVisible()
接受一个数字作为参数,它是一个Column.colId
。 getAllColumns()
return an array of Column
so you need to use a for-loop here 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.