Как получить данные строк отображения из ag-grid в vue? - PullRequest
Новая
       103

Как получить данные строк отображения из ag-grid в vue?

1 голос
/ 16 февраля 2020

Я использую ag-grid в своем приложении vue.

У меня есть три элемента в моих данных:

enter image description here

После фильтрации по «Тойоте» я получаю только одну информацию в сетке.

enter image description here

Я хочу, когда я нажимаю на кнопку, я получить результаты фильтрации (как в сетке), но когда я вызываю эту функцию, я получаю все элементы. this.$refs.grid.gridOptions.rowData;

как получить из таблицы только те данные, которые я вижу?

приложение. 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)
});

1 Ответ

1 голос
/ 16 февраля 2020

Я не думаю, что у ag-grid есть прямой способ получить эти данные. Но вы можете использовать forEachNodeAfterFilter до l oop поверх данных и собрать свой собственный массив. 

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

См. https://www.ag-grid.com/javascript-grid-api/#accessing -row-node

...