ag-网格FrameworkComponents与Vuetify

Question

我使用的是："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“。

当在vuetify选项卡中有一个带有框架组件(Vue)的AG-Grid时，您将得到以下错误。找不到名为"TradeCellRenderer“的组件。在Vue.components?里吗？

此代码引发上述错误：

 <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>

如果没有Vuetify，它可以正常工作吗？

        <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>

唯一的区别是，当网格位于Vuetify中时，它不工作( cellRendererFramework)，当您将网格放置在选项卡之外时，它工作得很好。

有没有其他人经历过这种情况，有什么原因吗？

Answer 1

这是我的丑恶之处，对我来说，这是暂时解决的。找到以下文件: ag-grid-vue/lib/VueComponentFactory.js添加/替换下面的代码，您可以从这个丑陋的代码中看到问题所在。组件不在父组件中，父组件通常是vuetify组件，所以如果我找不到它，我将继续向下看，直到我确信我到处都在寻找组件。稍后，我将发送电子邮件到ag-网格，以确定我是否做错了什么，或这是一个错误。

但这段代码应该能解决你的问题。

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