在vue里引入使用Ag-grid表格插件

在vue里引入使用Ag-grid表格插件

1.依赖版本

• package.json

 "dependencies": {
    "@ag-grid-community/core": "^25.1.0",
    "@ag-grid-enterprise/rich-select": "^25.1.0",
    "ag-charts-community": "^3.1.0",
    "ag-charts-vue": "^3.1.0",
  },


"devDependencies": {
    "@ag-grid-community/client-side-row-model": "^25.1.0",
    "@ag-grid-enterprise/all-modules": "^25.1.0",
    "@ag-grid-enterprise/column-tool-panel": "^25.1.0",
    "@ag-grid-enterprise/core": "^25.1.0",
    "@ag-grid-enterprise/menu": "^25.1.0",
    "@ag-grid-enterprise/row-grouping": "^25.1.0",
    "@ag-grid-enterprise/set-filter": "^25.1.0",
    "ag-grid-community": "^25.1.0",
    "ag-grid-enterprise": "^25.1.0",
    "ag-grid-vue": "^25.1.0",
  },

2.main.js引入

import 'ag-grid-enterprise'
import {AgGridVue} from "ag-grid-vue";

Vue.component('ag-grid-vue', AgGridVue)

• main.js引用路径–引用原本样式文件路径，此时用balham主题

import "ag-grid-enterprise/dist/styles/ag-grid.css";
import "ag-grid-enterprise/dist/styles/ag-theme-balham.css";

3.在原样式文件基础上自定义样式：

先复制这两个样式文件到styles里，重命名，代替原样式文件在main.js里面引入

import './assets/styles/ag-grid-my.css';
import './assets/styles/ag-theme-balham-my.css';