带有 Vuetify 的 ag-grid FrameworkComponents

Question

I am using: "ag-grid-community": "^21.2.2", "ag-grid-enterprise": "^21.2.2","ag-grid-vue": "^21.2.2", "vue": "^2.6.10","vuetify": "^1.5.16"

When you have an AG-Grid with a framework component (Vue) inside a vuetify tab, you get the following error. Could not find component with name of "TradeCellRenderer". Is it in Vue.components?

This code throws the above error:

 <v-tabs>
  <v-tab>Find</v-tab>
  <v-tab-item>
    <ag-grid-vue
      id="findGrid"
      style="width: 100%; height: 85vh;"
      class="ag-theme-balham"
      :gridOptions="findGridOptions"
      :columnDefs="findGridColumnDefs"
      :defaultColDef="findGridDefaultColDef"
      @grid-ready="getDocuments"
      @selection-changed="gridOnSelectionChanged"
      :rowSelection="findGridRowSelection"
      :rowData="findGridRowData"
      :floatingFilter="true"
      :frameworkComponents="frameworkComponents"
    ></ag-grid-vue>
  </v-tab-item>
</v-tabs>

Without the Vuetify Tab it works fine?

        <ag-grid-vue
      id="findGrid"
      style="width: 100%; height: 85vh;"
      class="ag-theme-balham"
      :gridOptions="findGridOptions"
      :columnDefs="findGridColumnDefs"
      :defaultColDef="findGridDefaultColDef"
      @grid-ready="getDocuments"
      @selection-changed="gridOnSelectionChanged"
      :rowSelection="findGridRowSelection"
      :rowData="findGridRowData"
      :floatingFilter="true"
      :frameworkComponents="frameworkComponents"
    ></ag-grid-vue>

The only difference is when the grid is inside a Vuetify Tab it does not work (the cellRendererFramework), when you place the grid outside the tab it works fine.

Have anyone else experience this, is there any reason for this?

Answer 1

This is my ugly fix, for me this resolves it temporarily. Find the following file: ag-grid-vue/lib/ VueComponentFactory.js Add/replace the code below, you can see from this ugly code what the problem is. the component is not in the parent, the parent is typically the vuetify component, so if I dont find it I will look further down and continue until I am sure I looked everywhere for the component. I will later send email to ag-grid to find out if I am doing something wrong or if this is a bug.

But this code should solve your issue.

    VueComponentFactory.getComponentType = function(parent, component) {
    if (typeof component === 'string') {
        var componentInstance = parent.$parent.$options.components[component];
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            console.error("Could not find component with name of " + component + ". Is it in Vue.components?");
            return null;
        }
        return Vue.extend(componentInstance);
    } else {
        // assume a type
        return component;
    }
};