未找到 Ag Grid header 组件

Question

使用 Vue 并且只想在列 header 上有一个自定义复选框（只有一个 header，不是全部）。不需要在此列上实施排序或任何疯狂的行为。

我的主要组件上有 AgGrid 非常大，所以下面的 ... 只是其他代码行通常所在的位置。这只是为了表明我已经导入文件并将其添加到组件中。这与我导入和调用各种 cellRendererFrameworks 的方式完全相同。在我的主要 AgGrid 组件上：

<script lang="ts">
  import Vue from 'vue'
  ...
  import AgGridSelectionHeader from '@/components/agGrid/AgGridSelectionHeader'

  export default Vue.extend({
    name: 'agGridInventoryView',
    components: {
      AgGridVue,
      ...
      AgGridSelectionHeader,
    },
    props: [...],
    data() {
      return {
        ...
        gridOptions: {
          rowSelection: 'multiple',
          rowModelType: 'serverSide',
          suppressRowClickSelection: true,
          cacheBlockSize: 20,
          cacheOverflowSize: 20,
          rowHeight: 59,
          serverSideSortingAlwaysResets: true,
          masterDetail: true,
          rowClassRules: {},
          suppressContextMenu: true,
          defaultColDef: {
            sortable: true,
            resizable: true,
          },
          columnTypes: {
            ...
            groupColumn: {
              cellRenderer: 'agGroupCellRenderer',
              headerComponent: AgGridSelectionHeader,
              headerComponentParams: {},
              checkboxSelection: true,
              width: 65,
              maxWidth: 65,
              minWidth: 65,
              menuTabs: [],
              sortable: false,
              resizable: false,
              pinned: 'left',
              lockPosition: true,
              lockVisible: true,
              lockPinned: true,
            },
          },
        },
        gridColumnDefs: [
          { headerName: '', field: 'type', type: 'groupColumn' },
          ...

我的headerComponent。值得注意的是，即使我删除了空的生命周期方法（这样组件实际上只有 template 和 name），错误仍然存在。

<script lang="ts">
import Vue from 'vue'

  export default Vue.extend({
    name: 'agGridSelectionHeader',
    components: { },
    props: [],
    data() {
      return {

      }
    },
    beforeMount() {

    },
    computed: {

    },
  })
</script>

<template lang="pug">
    span test
</template>

错误：

Answer 1

我一次又一次地看到 AgGrid 文档的缺陷。在 React 和 Angular header 组件信息下，它建议使用 headerComponentFramework。在 Vue 下，它使用 frameworkComponents: {} 和 headerComponent。

如果您为组件使用字符串名称，请使用 headerComponent。如果您像我一样使用直接引用，请使用 headerComponentFramework。这适用于 Vue 以及 React 和 Angular.

令人沮丧。

未找到 Ag Grid header 组件

Ag Grid header component not found

vue.js

ag-grid

ag-grid-vue