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>