ag-grid-vue 不呈现表格

Posted 2023-03-28

【中文标题】ag-grid-vue 不呈现表格

【英文标题】：ag-grid-vue not rendering the table

【发布时间】：2021-01-09 19:37:09

【问题描述】：

我正在尝试将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 的新手

【问题讨论】：

关于 ag-grid 的教程有一个内联样式，定义了 ag-grid-vue 的宽度和高度。 ag-grid 将需要定义的宽度和高度

@nizantz 感谢您的回复，但它不适用于% 中定义的高度/宽度。这对我的用例至关重要

【参考方案1】：

您可能想要做的是按照docs 中的说明设置domLayout="autoHeight"。所以在你的代码中：

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

现场演示

【讨论】：

感谢您指出文档，但在此 example 中，他们既不使用 domLayout="autoHeight" 也不使用固定高度，例如。在px 他们使用的百分比对我不起作用。

@Minato 在那个演示中，每个父母divs 直到html 标签都有height: 100%。在原始代码中，表格的父级div 被折叠，因为高度为not stretched to the parent height。我已经使用% 单元为您更新了演示。