未找到 Ag Grid 标头组件答案

【问题标题】：Ag Grid header component not found未找到 Ag Grid 标头组件
【发布时间】：2020-08-24 10:46:36
【问题描述】：

使用 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>

错误：

【问题讨论】：

标签： vue.js ag-grid ag-grid-vue

【解决方案1】：

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

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

令人沮丧。

【讨论】：