Vue Ag-grid 一次隐藏/取消隐藏所有列 [英] Vue Ag-grid hide/unhide all columns at once

问题描述

我试图在父组件的数据更改时隐藏和取消隐藏 ag-grid 中的所有列.这是我的子组件

I am trying to hide and unhide all columns in ag-grid on data change from the parent component. 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>

在父组件中，每当在父组件中调用 api get 时，都会重新初始化 columnDefs 和 rowData get.现在再次更改 columnDefs，我想隐藏所有列.

In the parent component the columnDefs and rowData get's reinitialized whenever the api get's called in the parent component. And now again on the change of columnDefs I want to hide all the columns.

推荐答案

setColumnsVisible() 接受一个数字作为参数，它是一个 Column.colId.getAllColumns() 返回一个 Column 的数组，所以这里需要使用 for 循环

setColumnsVisible() accepts a number as an argument which is a Column.colId. getAllColumns() return an array of Column so you need to use a for-loop here

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>

现场示例

这篇关于Vue Ag-grid 一次隐藏/取消隐藏所有列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！