1

我正在使用：“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），当您将网格放在选项卡之外时它工作正常。

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

4

1 回答 1

1

这是我的丑陋修复，对我来说这暂时解决了它。找到如下文件： ag-grid-vue/lib/ VueComponentFactory.js 添加/替换下面的代码，从这段丑陋的代码可以看出问题所在。该组件不在父组件中，父组件通常是 vuetify 组件，所以如果我没有找到它，我会进一步向下查找并继续，直到我确定我到处寻找该组件。稍后我将向 ag-grid 发送电子邮件，以了解我是否做错了什么或者这是一个错误。

但是这段代码应该可以解决您的问题。

    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;
    }
};
于 2020-03-02T09:09:18.290 回答