Vue.js 如何在vue中从ag网格获取显示行数据？

我在vue应用程序中使用ag网格

我的数据中有三项：

通过“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>
    `
};

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

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

---

我不认为ag grid有直接的方法来获取数据。但是您可以使用

forEachNodeAfterFilter

来循环数据并组合您自己的数组

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

看