ag-grid в vue отображает пользовательский компонент при загрузке строк

Question

Я пытаюсь отобразить компонент v-progress-round vuetify, когда ag-grid загружает строки, я следил за документацией ag-grid, но, похоже, это не работает. документация ag-grid для vue кажется устаревшей, поэтому я не знаю, что делать. На данный момент я сделал следующее:

TableProgress.vue

<template>
  <v-progress-circular :value="20" color="primary" indeterminate>
  </v-progress-circular>
</template>
<script>
export default {
  name: 'TableProgress'
}
</script>

MyTable.vue (Соответствующие части)

<template>
  <ag-grid-vue
      :grid-options="gridOptions"
      class="ag-theme-material"
      :frameworkComponents="frameworkComponents"
      :loadingOverlayComponent="loadingOverlayComponent"
  />
</template>
<script>
  import TableProgress from "./TableProgress";

  export default{
    data(){
      return{
        gridOptions: null,
        frameworkComponents: null,
        loadingOverlayComponent: null
      }
    },
    beforeMount () {
      this.frameworkComponents = {
        tableProgress: TableProgress
      }
      this.gridOptions.loadingOverlayComponent = 'tableProgress'
      this.loadingOverlayComponent = 'tableProgress'
    },
  }
</script>

Что я здесь делаю не так? Или это просто не работает с vue?

Answer 1

Я думаю, что атрибут overlayLoadingTemplate в ag-сетке вместо loadingOverlayComponent. Пожалуйста, посетите оверлеи ag-grid, чтобы узнать, как добавить загрузчик в таблицу ag-grid.

Answer 2

Вы импортируете TableProgress, но не используете его. Вы должны добавить его в компоненты.

<script> 
import TableProgress from "./TableProgress"; 
export default {
    components: { 
        TableProgress
    },
    //... 
}
</script>