未找到Ag Grid头组件

Question

使用Vue，只是想在一个列头上有一个自定义的复选框（只是一个列头，不是所有的列头）。不需要在这个列上实现排序或任何疯狂的行为。

我的主组件上有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头部组件信息下，它建议使用 headerComponentFramework. 在Vue下，它使用 frameworkComponents: {} 和 headerComponent.

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

令人沮丧。