nuxt.js - 使用 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;
    }
  }
};

标签： nuxt.jsag-grid