vue2 中使用 ag-grid-enterprise

引入并不好使问题

编译引入

// vue.config.js
module.exports = {
  transpileDependencies: [
    "ag-grid-enterprise",
  ],
}

这句话的意思是告诉 Vue CLI 在构建过程中对 ag-grid-enterprise 模块进行转译（transpile）。默认情况下，Vue CLI 会跳过对 node_modules 中的依赖项进行转译，以提高构建性能。然而，有些库可能包含现代 JavaScript 语法，这些语法在某些环境中（如旧版浏览器）可能不被支持。通过将这些库添加到 transpileDependencies 数组中，可以确保它们在构建过程中被转译为兼容的代码。

npm run dev 时卡住了

63% building 558/624 modules 66 active ...ules/sortablejs/modular/sortable.esm.js[BABEL] 
Note: The code generator has deoptimised the styling of 
/Users/wangzhongqing/Desktop/WorkProject/hongfang_v1/node_modules/ag-grid-enterprise/dist/ag-grid-enterprise.auto.esm.js 
as it exceeds the max of 500KB.

你遇到的问题是 Webpack 在构建过程中对 ag-grid-enterprise 模块进行了去优化处理，因为该模块的大小超过了 500KB。这通常不会影响功能，但可能会导致构建时间增加或性能下降。
以下是一些可能的解决方案和建议：

调整编译

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      // 允许更大的模块大小
      compact: false
    }]
  ]
};

不过，我放开之后，dev 的时候巨慢，

94% after seal 卡在这里了

先不要引入 import 'ag-grid-enterprise';，等项目运行之后再引入

测试打包

打包是可以打包的，但是打包速度非常慢，而且体积很大，也可以运行，等待研究并优化

增加操作列（自定义渲染组件）测试过程

• 在测试版本

场景：添加操作图表列表

测试一，版本都退回到 25

直接渲染

先注册，之后再指定组件

升级 ag-grid-vue 试试

如果 community 版本太高

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

found in

之后改成版本一致的话，aggrid 是正常的 不过 组件还是渲染不出来Ï

操作列：能渲染的版本

这样可以，需要在局部组件中先注册一下

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

操作列，传递参数，以及处理事件

大概得数据流如下

这个演示一下

按钮组件只能静态引入，动态引入会报错

这个是动态引入

静态引入

源 git 解决方案记录

1. https://github.com/ag-grid/ag-grid/issues/5892

代码封装

封装代码：

// MyAgGrid
<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
<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>
//内容组件|操作组件
import Vue from 'vue';
export default Vue.extend({
  name: 'Setter',
  computed: {

  },
  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
<template>
  <MyAgGrid :columnDefs="grid.columnDefs" :rowData="grid.rowData" @handleDelete="handleDelete"
    @handleAction="handleAction" />
</template>

<script>
export default {
  name: 'useExample',
  components: {
    MyAgGrid: () => import('@/components/MyAgGrid/index.vue'),
  },
  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, },
          { field: "bigCategory", headerName: "材料大类", filter: true, width: 240, tooltipValueGetter: (p) => p.value, },
          { field: "categoryFullName", headerName: "材料类别", filter: true, width: 200, tooltipValueGetter: (p) => p.value, },
          { field: "spec", headerName: "规格", filter: true, width: 240, tooltipValueGetter: (p) => p.value, },
          { field: "barCode", headerName: "型号", filter: true, width: 240, tooltipValueGetter: (p) => p.value, },
          { field: "brandName", headerName: "品牌", filter: true, width: 240, tooltipValueGetter: (p) => p.value, },
          { field: "supplierName", headerName: "唯一商家", filter: true, width: 240, tooltipValueGetter: (p) => p.value, },
        ],
        rowData: [],
      },
    }
  },
  methods: {
    handleDelete(rowData) {
      console.log('handleDelete:>>', rowData)
    },
    handleAction(rowData) {
      console.log('handleAction:>>', rowData)
    },
  }
}
</script>