ag-grid-vue不呈现表

如何解决ag-grid-vue不呈现表

我正在尝试将ag-grid集成到我现有的vue.js项目中。该表无法正确呈现。我在ag-grid here网站上关注了该教程。

<template>
  <v-container>
    <v-row>
      <v-col cols="12" sm="3"></v-col>
      <v-col cols="12" sm="6">
        <ag-grid-vue
          class="ag-theme-alpine"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :modules="modules"
        >
        </ag-grid-vue>
      </v-col>
      <v-col cols="12" sm="3"></v-col>
    </v-row>
  </v-container>
</template>
<script>
import { AgGridVue } from "@ag-grid-community/vue";
import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
export default {
  name: "VueGridTest",data() {
    return {
      columnDefs: null,rowData: null,modules: [ClientSideRowModelModule],};
  },components: {
    AgGridVue,},beforeMount() {
    this.columnDefs = [
      { headerName: "Make",field: "make" },{ headerName: "Model",field: "model" },{ headerName: "Price",field: "price" },];

    this.rowData = [
      { make: "Toyota",model: "Celica",price: 35000 },{ make: "Ford",model: "Mondeo",price: 32000 },{ make: "Porsche",model: "Boxter",price: 72000 },];
  },};
</script>

结果如下：

如果我将表div的height固定为它呈现的任何数字。

项目配置：

"@ag-grid-community/all-modules": "^24.0.0","@ag-grid-community/client-side-row-model": "^24.0.0","@ag-grid-community/core": "^24.0.0","@ag-grid-community/csv-export": "^24.0.0","@ag-grid-community/infinite-row-model": "^24.0.0","@ag-grid-community/vue": "^24.0.0","@ag-grid-enterprise/all-modules": "^24.0.0","@ag-grid-enterprise/server-side-row-model": "^24.0.0","vue": "^2.6.12","vue-class-component": "^7.2.5","vue-property-decorator": "^9.0.0",

控制台中也没有错误。

我是ag-grid和ag-grid-vue的新手

解决方法

您可能想要按照docs中所述设置domLayout="autoHeight"。因此，在您的代码中：

<ag-grid-vue
  class="ag-theme-alpine"
  domLayout="autoHeight"
  ...
></ag-grid-vue>

实时演示