我使用 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,
};
显然,我的自定义组件不知道这些组件,因为它们没有被导入,所以视图找不到这些组件。由于每个视图将显示不同的列,并且这些列可以显示或不显示渲染器组件,因此我需要将所需的所有组件传递给网格组件并导入它们。
任何想法如何导入和使用这些组件?