[英]ag-grid FrameworkComponents with Vuetify
我正在使用:“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),当您将网格放置在选项卡外时它工作正常。
有没有其他人经历过这种情况,有什么原因吗?
这是我的丑陋修复,对我来说这可以暂时解决它。 找到如下文件: 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;
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.