带有 Vuetify 的 ag-grid FrameworkComponents答案

【问题标题】：ag-grid FrameworkComponents with Vuetify带有 Vuetify 的 ag-grid FrameworkComponents
【发布时间】：2020-05-08 17:18:23
【问题描述】：

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

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

【问题讨论】：

TradeCellRenderer 是 Vue 组件单元格渲染器吗？我在 Vuetify 选项卡项中使用 ag-grid 没有任何问题。我确实在ag-grid-vue 周围有一个包装器，用于设置它的高度和宽度。
TradeCellRenderer 是一个 Vue 组件，我实际上使用的是 ag-grid onine 示例。你是怎么包起来的？ @尼古拉斯马歇尔
我也将 vuetify 升级到了最新的和 ag-grid，仍然遇到这个问题。 “vuetify”：“^2.2.6”，“ag-grid-vue”：“^21.2.2”，
我也有同样的问题。从那以后你能找到解决办法吗？
@Radical_Activity 见下面的答案

标签： javascript vue.js ag-grid ag-grid-vue

【解决方案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;
    }
};

【讨论】：