Использование сетки ag в качестве компонента nuxt - PullRequest
Новая
       12

Использование сетки ag в качестве компонента nuxt

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

Я хотел бы использовать Ag-grid как компонент, тогда я хотел бы назвать его со многих страниц. Компонент должен извлекать столбцы и данные с родительской страницы.

Поскольку я много боролся с этой проблемой, я был бы очень признателен за простой пример. Кажется, у меня всегда возникает какая-то проблема синхронизации между страницей и моим компонентом.

Если возможно, я бы хотел создать страницу с пустой сеткой, а затем загрузить данные. Но не уверен, что это возможно.

Заранее спасибо Håkan

Моя страница: 

<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;
    }
  }
};
...