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

Posted 2023-03-28

【中文标题】Vue Ag-grid 一次隐藏/取消隐藏所有列

【英文标题】：Vue Ag-grid hide/unhide all columns at once

【发布时间】：2020-12-22 15:38:34

【问题描述】：

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

【参考方案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>

现场示例

【讨论】：

为什么当我在按钮单击时调用该函数时它会起作用。但是，如果我在更改另一个数据时调用该函数，这些列不会隐藏吗？知道为什么会这样。我正在使用 vuejs

您似乎没有在mounted() 中分配columnApi

我直接使用gridOptions，会不会有问题？

其实没有，我忘了。将设置代码和框示例以查看发生了什么

尝试用@click="hideColumns()"替换@click="hideColumns"