在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';