将ag网格用作nuxt组件

Question

我想使用Ag-grid作为组件，然后我想从许多页面中调用它。 该组件应从父页面获取列和数据。

由于我一直在为这个问题而苦苦挣扎，所以我非常感谢一个简单的例子。 看来我总是在页面和组件之间遇到某种时序问题。

如果可能的话，我想创建一个带有空网格的页面，然后加载数据。但不确定是否可行。

预先感谢 霍坎

我的页面：

<template>
  <div>
    <aomGrid
      pagePath="/stock/"
      :fields="gridHeader.fields"
      :data="rowData"
    ></aomGrid>
  </div>
</template>

我的组件

<template>
  <div>
    <ag-grid-vue
      class="ag-theme-fresh grid"
      :gridOptions="gridOptions"
      :rowDataChanged="onRowDataChanged"
      :rowData="gridData"
    >
    </ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
export default {
  data() {
    return {
      gridOptions: null,
      gridData: null,
    };
  },
  props: {
    fields: {
      type: Array
    },
    gridData: {
      type: Array
    }
  },
  components: {
    AgGridVue
  },
    onRowDataChanged() {
      Vue.nextTick(() => {
        this.gridOptions.api.sizeColumnsToFit();
      });
    },
    created() {
      this.gridOptions = {};
      this.gridOptions.columnDefs = this.fields;
    },
    beforeMount () {
     this.gridOptions.api.setRowData = this.gridData;
    }
  }
};