Question

我正在使用AgGrid作为网格来显示站点中的数据。

在此示例Example: Rendering using VueJS Components之后，我能够使用不同的组件呈现到不同的列中。

现在，我需要在多个视图中实现此网格，我想制作一个“自定义组件”来实现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,
};

很明显，我的自定义组件不知道这些组件，因为它们没有被导入，因此视图找不到这些组件。由于每个视图将显示不同的列，而这些视图可能会显示渲染器组件，所以我需要将所有需要的组件传递到网格组件并导入它们。

有什么想法如何导入和使用这些组件吗？

Vue-如何传递和动态使用多个组件作为道具

0 个答案: