vue集成ag-grid框架

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-vue
        style="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-vue
    style="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
}