Компонент заголовка Ag Grid не найден - PullRequest
Новая
       85

Компонент заголовка Ag Grid не найден

0 голосов
/ 08 мая 2020

Используем 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' },
          ...

My 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>

Ошибка: error

1 Ответ

0 голосов
/ 08 мая 2020

Снова и снова я вижу fl aws документации AgGrid. В информации о компонентах заголовка React и Angular предлагается использовать headerComponentFramework. Под Vue он использует frameworkComponents: {} и headerComponent.

Если вы используете строковые имена для своих компонентов, используйте headerComponent. Если вы используете прямые ссылки, как я, используйте headerComponentFramework. Это применимо к Vue, а также к React и Angular.

разочаровывает.

...