无法找到组件XXX的ag-grid-vue错误，您忘记配置此组件了吗？

Question

我正在使用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，您忘记配置这个组件了吗？”

知道为什么吗？

Answer 1

通过将ag-grid升级到最新版本- 27.0.0来解决这个问题。