Vue Ag-grid一次隐藏/取消隐藏所有列

问题描述

我试图根据父组件的数据更改隐藏和取消隐藏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,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>

实时示例