1

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

知道为什么吗？

4

1 回答 1

0

设法通过将 ag-grid 升级到最新版本来解决它 - 27.0.0

于 2022-02-19T20:59:28.020 回答