ag-grid-vue 报错 Could not find component XXX,是不是忘记配置这个组件了?
Error in ag-grid-vue Could not find component XXX, did you forget to configure this component?
我正在使用 ag-grid-vue,我正在尝试创建自定义工具提示。
这是我的代码:
CustomToolTipVue.js分量:
export default {
template: `
<div class="custom-tooltip" v-bind:style="{ backgroundColor: color }">
<p><span>{{ data.athlete }}</span></p>
<p><span>Country: </span>{{ data.country }}</p>
<p><span>Total: </span>{{ data.total }}</p>
</div>
`,
data: function () {
return {
color: null,
athlete: null,
country: null,
total: null,
};
},
beforeMount() {
this.data = this.params.api.getDisplayedRowAtIndex(
this.params.rowIndex
).data;
this.color = this.params.color || 'white';
},
};
网格组件 - 我正在使用它的地方(仅附上主要代码):
<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-community";
import CustomToolTipVue from './CustomToolTipVue.js'
export default {
name: "Grid",
data: () => ({
gridOptions: null,
gridApi: null,
gridColumnApi: null,
selectedRows: [],
noRowsTemplate: "",
loadingTemplate: "",
rowClassRules:null
}),
components: {
AgGridVue,
CustomToolTipVue
},
created() {
this.gridOptions = {};
this.gridOptions.columnDefs = this.columnDefs;
this.gridOptions.components = {
};
},
computed: {
defaultColDef() {
return {
resizable: true,
menuTabs: ["filterMenuTab", "generalMenuTab", "columnsMenuTab"],
sortable: true,
filter: true,
tooltipComponentParams: { color: '#ececec' },
tooltipComponent: "CustomToolTipVue",
};
},
},
而且我不断收到此错误:
“找不到组件 CustomToolTipVue,您是否忘记配置该组件?”
知道为什么吗?
通过升级 ag-grid 到最新版本 - 27.0.0
设法解决了这个问题
我正在使用 ag-grid-vue,我正在尝试创建自定义工具提示。
这是我的代码:
CustomToolTipVue.js分量:
export default {
template: `
<div class="custom-tooltip" v-bind:style="{ backgroundColor: color }">
<p><span>{{ data.athlete }}</span></p>
<p><span>Country: </span>{{ data.country }}</p>
<p><span>Total: </span>{{ data.total }}</p>
</div>
`,
data: function () {
return {
color: null,
athlete: null,
country: null,
total: null,
};
},
beforeMount() {
this.data = this.params.api.getDisplayedRowAtIndex(
this.params.rowIndex
).data;
this.color = this.params.color || 'white';
},
};
网格组件 - 我正在使用它的地方(仅附上主要代码):
<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-community";
import CustomToolTipVue from './CustomToolTipVue.js'
export default {
name: "Grid",
data: () => ({
gridOptions: null,
gridApi: null,
gridColumnApi: null,
selectedRows: [],
noRowsTemplate: "",
loadingTemplate: "",
rowClassRules:null
}),
components: {
AgGridVue,
CustomToolTipVue
},
created() {
this.gridOptions = {};
this.gridOptions.columnDefs = this.columnDefs;
this.gridOptions.components = {
};
},
computed: {
defaultColDef() {
return {
resizable: true,
menuTabs: ["filterMenuTab", "generalMenuTab", "columnsMenuTab"],
sortable: true,
filter: true,
tooltipComponentParams: { color: '#ececec' },
tooltipComponent: "CustomToolTipVue",
};
},
},
而且我不断收到此错误:
“找不到组件 CustomToolTipVue,您是否忘记配置该组件?”
知道为什么吗?
通过升级 ag-grid 到最新版本 - 27.0.0
设法解决了这个问题