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

Question

我正在尝试隐藏和取消隐藏 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 我想隐藏所有列。

Answer 1

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>

现场示例