Излучение отфильтрованных строк в сетке ag vue - PullRequest
Новая
       42

Излучение отфильтрованных строк в сетке ag vue

0 голосов
/ 13 апреля 2020

Я пытаюсь передать отфильтрованное число строк из таблицы сетки ag, являющейся моим дочерним компонентом, в родительский компонент 

<template>
  <ag-grid-vue
    style="width: 100%; height: 600px"
    class="ag-theme-balham"
    id="myGrid"
    :enableRangeSelection="true"
    :defaultColDef="{
              resizable: true,
              sortable: true,
              filter: true,
              width: 100
            }"
    :columnDefs="columnDefs"
    :gridOptions="gridOptions"
    :processCellForClipboard="processCellForClipboard"
    :rowData="newRowData"
    :modules="[...agModule, ...agCModule]"
  ></ag-grid-vue>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-enterprise";
import { LicenseManager } from "ag-grid-enterprise";
import { AllModules } from "ag-grid-enterprise/dist/ag-grid-enterprise";
import { AllCommunityModules } from "ag-grid-community/dist/ag-grid-community";

LicenseManager.setLicenseKey(process.env.VUE_APP_AG_KEY);
import axios from "axios";

export default {
  name: "Table",
  props: {
    columnDefs: {
      type: Array,
      default() {
        return null;
      }
    },
    rowData: {
      type: Array,
      default() {
        return null;
      }
    }
  },
  components: {
    "ag-grid-vue": AgGridVue
  },
  data() {
    return {
      agModule: AllModules,
      agCModule: AllCommunityModules,
      newRowData: [],
      gridApi: null,
      gridOptions: {}
    };
  },
  watch: {
    rowData: function(newVal, oldVal) {
      this.newRowData = newVal;
    },
    count: "getDisplayedRowCount"
  },
  computed: {
    count() {
      return this.gridApi.getDisplayedRowCount();
    }
  },
  beforeMount() {
    this.processCellForClipboard = params => {
      return `${params.value.trim()},`;
    };
  },
  methods: {
    getDisplayedRowCount() {
      console.log("getDisplayedRowCount() => " + this.count);
      this.$emit("filteredrows", this.count);
    }
  },
  mounted() {
    this.newRowData = this.rowData;
    this.gridApi = this.gridOptions.api;
  }
};
</script>

<style lang="sass" scoped>
@import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css"
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css"
</style>

Так выглядит мой дочерний компонент. Но когда таблица таблицы ag загружается, значение gridapi равно нулю, из-за чего я не получаю значение count, определенное в вычисляемом свойстве. Я хочу вызывать функцию getDisplayedRowCount каждый раз, когда происходит изменение числа строк. Как мне этого добиться?

1 Ответ

1 голос
/ 13 апреля 2020

Вы можете написать свое вычисленное свойство следующим образом 

computed: {
    count() {
      if (this.gridApi) {
        return this.gridApi.getDisplayedRowCount();
      } else {
        return this.newRowData.length;
      }
    }
  },
...