VUE2集成方案

1.创建vue项目
2.添加依赖

npm install --save ag-grid-community ag-grid-vue vue-property-decorator@^8.0.0

3.在src/App.vue添加样式

<style lang="scss">@import "~ag-grid-community/dist/styles/ag-grid.css";@import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
</style>

4.在vue文件添加模板代码

<template><ag-grid-vue style="width: 500px; height: 500px;"class="ag-theme-alpine":columnDefs="columnDefs":rowData="rowData"></ag-grid-vue>
</template>
<script>
import { AgGridVue } from "ag-grid-vue";export default {name: "App",data() {return {columnDefs: null,rowData: null,};},components: {AgGridVue,},beforeMount() {this.columnDefs = [{ field: "make" },{ field: "model" },{ field: "price" },];this.rowData = [{ make: "Toyota", model: "Celica", price: 35000 },{ make: "Ford", model: "Mondeo", price: 32000 },{ make: "Porsche", model: "Boxter", price: 72000 },];},
};
</script>
<style lang="scss">@import "~ag-grid-community/dist/styles/ag-grid.css";@import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
</style>

集成侧边栏

<div style="height: 100%"><ag-grid-vuestyle="width: 100%; height: 100%;"class="ag-theme-alpine"id="myGrid":columnDefs="columnDefs"@grid-ready="onGridReady":defaultColDef="defaultColDef":sideBar="sideBar":rowData="rowData"></ag-grid-vue>
</div>data(){return {defaultColDef: {flex: 1,minWidth: 100,enableValue: true,enableRowGroup: true,enablePivot: true,sortable: true,filter: true,},sideBar: true,columnDefs:[],rowData: null,}
}

VUE3集成方案

1.创建vue项目
2.添加依赖

npm install ag-grid-vue3 ag-grid-community vue-class-component@next

3.在src/App.vue添加样式

<style lang="scss">@import "~ag-grid-community/dist/styles/ag-grid.css";@import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
</style>

4.在vue文件添加模板代码

<template><ag-grid-vuestyle="width: 500px; height: 200px"class="ag-theme-alpine":columnDefs="columnDefs":rowData="rowData"></ag-grid-vue>
</template><script>
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";export default {name: "App",components: {AgGridVue,},setup() {return {columnDefs: [{ headerName: "Make", field: "make" },{ headerName: "Model", field: "model" },{ headerName: "Price", field: "price" },],rowData: [{ make: "Toyota", model: "Celica", price: 35000 },{ make: "Ford", model: "Mondeo", price: 32000 },{ make: "Porsche", model: "Boxter", price: 72000 },],};},
};
</script>

---

ag-grid破解

//破解ag-grid
import 'ag-grid-enterprise';
import {LicenseManager} from 'ag-grid-enterprise'
LicenseManager.prototype.validateLicense = function(){return true
}