我正在尝试集成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>
结果如下所示:
如果我height
将表格 div 的值固定为它呈现的任何数字。
项目配置:
"@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