Блог

Я использую AgGrid в качестве сетки для отображения данных на сайте.

Следуя этому примеру: рендеринг с использованием компонентов VueJS, я могу использовать разные компоненты для рендеринга в разные столбцы.

Теперь, когда мне нужно реализовать эту сетку в нескольких представлениях, я хочу создать «пользовательский компонент», который реализует компонент ag-grid-vue и получает только определения столбцов, данные строк и компоненты (если столбцы отображают другой компонент).

Что-то вроде этого:

 <template>
  <div>
    <ag-grid-vue
      :animateRows="true"
      :columnDefs="columnDefs"
      :frameworkComponents="frameworkComponents"
      :defaultColDef="defaultColDef"
      :gridOptions="gridOptions"
      :pagination="true"
      :paginationPageSize="paginationPageSize"
      :rowData="rowData"
      :suppressPaginationPanel="true"
      colResizeDefault="shift"
      ref="agGridTable"
      rowSelection="multiple"
    ></ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";

export default {
  name: "AgGrid",
  components: { AgGridVue },
  props: ['columnDefs', 'components', 'rowData'],
  data() {
    return {
      gridApi: null,
      gridOptions: {},
      defaultColDef: {
        sortable: true,
        resizable: true,
        suppressMenu: true
      },
      frameworkComponents: null
    }
  },
  beforeMount() {
    this.frameworkComponents = this.components;
  }
}
</script>
  

Теперь родительский сервер передаст все необходимые данные:

 <ag-grid :column-defs="columnDefs" :components="frameworkComponents" :row-data="gridList"></ag-grid>
  

Проблема возникает, когда я пытаюсь передать эти компоненты в качестве реквизита:

 this.frameworkComponents = {
  squareRenderer: SquareRenderer,
  cubeRenderer: CubeRenderer,
  paramsRenderer: ParamsRenderer,
  currencyRenderer: CurrencyRenderer,
  childMessageRenderer: ChildMessageRenderer,
};
  

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

Есть идеи, как импортировать и использовать эти компоненты?