vue中的ag-grid在加载行时显示自定义组件

Question

我试图在 ag-grid 加载行时显示 v-progress-circular vuetify 组件，我一直在关注 ag-grid 文档，但这似乎不起作用。 vue 的 ag-grid 文档似乎已经过时，所以我不知道该怎么办。到目前为止我所做的如下：

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

我认为 ag-grid 中的属性是 overlayLoadingTemplate 而不是 loadingOverlayComponent。请访问ag-grid overlays 了解如何将加载器添加到您的 ag-grid 表中

Answer 2

您导入了 TableProgress 但您不使用它。您必须将其添加到组件中。

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