Vue 2 安装并使用 Ag-Grid ^31.3.4、样式、中文化、组件设计

---

总结

• Vue2 中只能安装 Ag-grid v31.3 版本，此说法的来源 Get Started with AG Grid
  

• Ag-grid 给的安装命令，默认是安装大于 v31.3 的，所以安装的时候要指定版本 npm install ag-grid-community@31.3

---

Vue 2 中的效果

---

依赖环境

我的 vue 的版本是 2.6.10 ，(后面升到了 ^2.7.16 了)

---

Vue2 安装 Ag-Grid

首先 ，根据官网上的描述，vue2 只支持到 v31.3，所以就只安装这个版本 点我跳转到官方的描述

npm install ag-grid-community@31.3        

我的依赖包添加了三个

---

运行项目后报错

解决办法是

在 vue.config.js 中添加这句话

这段配置的作用是让 Webpack 处理 node_modules 目录下以 .mjs 结尾的文件，并自动检测这些文件的内容来决定如何解析它们。

module: {rules: [{test: /\.mjs$/,include: /node_modules/,type: 'javascript/auto'}]
}

---

引入需要的样式

在 main.js 中引入

---

测试是否可以使用

直接写个组件，引入下面的代码快速测试一下

<template><div class="divBox"><el-card><ag-grid-vue style="width: 500px; height: 200px" class="ag-theme-quartz" :columnDefs="columnDefs":rowData="rowData"></ag-grid-vue></el-card></div>
</template><script>
import { AgGridVue } from "ag-grid-vue";export default {name: '',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: "Boxster", price: 72000 },];},
}
</script>
<style scoped lang='scss'>
.button-box {display: flex;justify-content: space-between;align-items: center;margin: 10px 0;.button-box-left {display: flex;align-items: center;}
}
</style>

---

使用配置方面

汉语配置

安装这个依赖 @ag-grid-community/locale

然后引入

之后验证一下是否汉化

---

Tooltip 的添加

效果如下

需要有 tooltipShowDelay

columnDefs: [{field: "shortname", headerName: "材料名称", filter: true, width: 240, pinned: 'left',tooltipValueGetter: (p) => p.value,},
],
gridOptions: {tooltipShowDelay: 500,// tooltip 只有添加 tooltipShowDelay 才会显示
}

整体代码如下：

---

组件版本会影响自定义组件的渲染的方法

需求：Ag-Grid 添加操作列，如下图所示
问题：我用 ^25 版本的方法引入组件，在 ^25 版本是可以渲染的，但是 ^31.3.4 不可以了
猜测：可能的原因是渲染的方法改变了，v25 的方法，v31 的已经不兼容了

---

测试1. 版本回退到 ^25

如果 版本都退回到 25, 直接渲染会报错

先注册，之后再指定组件，这是正常的

准备升级组件版本，删除 node_module，重新安装依赖，重启项目

测试2. ag-grid-vue v31.3.4 + ag-grid-community v25 的组合

准备另一个组件版本，删除 node_module，重新安装依赖，重启项目

测试3. ag-grid-vue v25 + ag-grid-community v31.3.4 的组合

报错了

Error in mounted hook: "TypeError: Class constructor BaseComponentWrapper cannot be invoked without 'new'"found in

之后升级 ag-grid-community 保持版本一致的话，ag-grid 是正常的，不过组件渲染不出来

测试4. v31.3.4 可正常渲染的代码使用

这样可以，需要在局部组件中先注册一下
这里我的操作按钮组件是 Setter，先注册，然后再 cellRenderer 中传递组件的名字

这里演示一下效果

也可以这样写

cellRendererSelector: (params) => {return {component: 'Setter', // 动态选择组件};
},

这两个接口的 Api 文档在这里

1. reference-styling-cellRendererSelector
2. reference-styling-cellRenderer

---

---

自定义组件的数据流转，以及事件定义

数据流如下

这个演示一下

踩坑：按钮组件最好静态引入，动态引入会报错

这个是动态引入

---

代码: 简单封装带有操作列的通用组件

下面的代码是已经封装好的，方便开发的思路，

• 其中 index.vue 是核心封装 ag-grid
• Setter.vue 是操作列的组件
• useExample 是使用的例子

// MyAgGrid: index.vue
<template><AgGridVue style="width:100%; height: calc(100vh - 270px)" :class="theme" :columnDefs="mergedColumnDefs":rowData="rowData" :gridOptions="mergedGridOptions" />
</template><script>
import { AgGridVue } from "ag-grid-vue";
import { AG_GRID_LOCALE_CN } from '@ag-grid-community/locale';
import Setter from '@/components/MyAgGrid/components/Setter.vue'export default {name: 'MyAgGrid',components: {AgGridVue,Setter},props: {theme: {type: String,default: 'ag-theme-quartz'},columnDefs: {type: Array,default: () => []},rowData: {type: Array,default: () => []},gridOptions: {type: Object,default: () => ({})}},data() {return {defaultGridOptions: {tooltipShowDelay: 1000,  // tooltip 只有添加 tooltipShowDelay 才会显示localeText: AG_GRID_LOCALE_CN,},defaultColumnDefs: [{headerName: "操作",width: 100,field: "setter",pinned: 'right',cellRenderer: 'Setter',cellRendererParams: {actionHandler: this.handleAction, // 传递点击处理方法actionDelete: this.handleDelete}}],}},computed: {mergedGridOptions() {return { ...this.defaultGridOptions, ...this.gridOptions };},mergedColumnDefs() {return [...this.defaultColumnDefs, ...this.columnDefs];}},methods: {handleAction(data) {this.$emit('handleAction', data)},handleDelete(data) {this.$emit('handleDelete', data)},},
}
</script>
<style scoped lang='scss'></style>

操作组件 Setter.vue：

// Setter.vue
<template><div class="setter"><el-tooltip class="item" effect="light" content="删除" placement="bottom-start"><i class="el-icon-delete" @click="delRow"></i></el-tooltip><el-tooltip class="item" effect="light" content="编辑" placement="bottom-start"><i class="el-icon-document" @click="setRow"></i></el-tooltip></div>
</template><script>
export default {name: 'Setter',methods: {//图标事件setRow() {// this.$parent.$emit('setter', this.params.api.getFocusedCell());// console.log('点击设置按钮:>>')this.params.actionHandler(this.params.data)},//删除数据delRow() {// console.log('点击删除按钮:>>')this.params.actionDelete(this.params.data)}}
}
</script>

使用样例 useExample.vue

// useExample.vue
<template><MyAgGrid :columnDefs="grid.columnDefs" :rowData="grid.rowData" @handleDelete="handleDelete"@handleAction="handleAction" />
</template><script>
import MyAgGrid from '@/components/MyAgGrid/index.vue'
export default {name: 'useExample',components: {MyAgGrid,},data() {return {grid: {columnDefs: [{ field: "enterprise_name", headerName: "图片", filter: true, width: 100, pinned: 'left', tooltipValueGetter: (p) => p.value, },{ field: "number", headerName: "材料编号", filter: true, width: 180, pinned: 'left', tooltipValueGetter: (p) => p.value, },{ field: "shortname", headerName: "材料名称", filter: true, width: 240, pinned: 'left', tooltipValueGetter: (p) => p.value, },],rowData: [],},}},methods: {handleDelete(rowData) {console.log('handleDelete:>>', rowData)},handleAction(rowData) {console.log('handleAction:>>', rowData)},}
}
</script>