如何从 vue 中的 ag-grid 获取显示行数据？答案

【问题标题】：How to get display rows data from ag-grid in vue?如何从 vue 中的 ag-grid 获取显示行数据？
【发布时间】：2020-05-31 13:06:11
【问题描述】：

我在我的 vue 应用程序中使用 ag-grid。

我的数据中有三项：

按“Toyota”过滤后，我在网格上只得到一个数据。

我希望当我点击按钮时我会得到过滤结果（就像在网格中一样）但是当我调用这个函数时我会得到所有的项目。 this.$refs.grid.gridOptions.rowData;

如何只获取我可以从网格中看到的数据？

app.js：

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import { AgGridVue } from "ag-grid-vue";

export const App = {
  name: "App",
  data() {
    return {
      columnDefs: null,
      rowData: null
    };
  },
  components: {
    AgGridVue
  },
  methods: {
    some: function() {
      const grid = this.$refs.grid.gridOptions;

      const rows = grid.rowData;
      console.log({ rows });
    }
  },
  beforeMount() {
    this.columnDefs = [
      { headerName: "Make", field: "make", filter: true },
      { headerName: "Model", field: "model" },
      { headerName: "Price", field: "price" }
    ];

    this.rowData = [
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxter", price: 72000 }
    ];
  },
  template: `
    <div>
    <ag-grid-vue ref="grid" style="width: 500px; height: 300px;"
        class="ag-theme-balham"
        :columnDefs="columnDefs"
        :rowData="rowData">
    </ag-grid-vue>

    <button @click="some">Click</button>
    </div>
    `
};

main.js：

import Vue from 'vue';
import { App } from './app';

new Vue({
  el: '#root',
  render: h => h(App)
});

【问题讨论】：

标签： vue.js ag-grid

【解决方案1】：

我认为 ag-grid 没有直接获取该数据的方法。但是您可以使用forEachNodeAfterFilter 来循环数据并组合您自己的数组。

const rowData = [];
gridApi.forEachNodeAfterFilter(node => rowData.push(node.data));

见https://www.ag-grid.com/javascript-grid-api/#accessing-row-nodes

【讨论】：

【解决方案2】：

您可以使用以下代码获取此信息：

for (let i = 0; i < grid.api.getDisplayedRowCount(); i++) {
  let node = grid.api.getDisplayedRowAtIndex(i);
  console.log(node.data);
}

这样您可以遍历显示的行，如果需要，您可以将这些数据推送到另一个数组中。

【讨论】：