如何在 Nuxt 应用程序中使用 ag-grid

Posted 2023-03-28

【中文标题】如何在 Nuxt 应用程序中使用 ag-grid

【英文标题】：How to use ag-grid in a Nuxt app

【发布时间】：2018-07-29 22:57:34

【问题描述】：

我正在构建一个 Nuxt 应用程序，并试图在我的一个页面中呈现一个 ag-grid

我创建了一个名为ag-grid.js的插件：

import * as agGridEnterpise from 'ag-grid-enterprise/main'

agGridEnterpise.LicenseManager.setLicenseKey([MY_LICENSE_KEY])

在nuxt.config.js我已经注册了插件：

plugins: [
    //...
    
      src: '~/plugins/ag-grid.js',
      s-s-r: false
    
],

在我的页面组件中，我有：

<template>
    <ag-grid-vue ref="table" class="ag-theme-material" 
 :pinnedTopRowData="pinnedRow ? [pinnedRow] : []" :gridOptions="gridOptions" 
 :columnDefs="columnDefs" :rowData="tableData" v-show="!loadingGridData" 
 :cellValueChanged="onCellValueChanged">
    </ag-grid-vue>
</template>
<script>
import  AgGridVue  from 'ag-grid-vue'
export default 
  // ....
  components: 
    'ag-grid-vue': AgGridVue
    // ....
  

</script>

但是当我渲染页面时出现以下错误：

TypeError: Cannot read property 'match' of undefined at Environment.webpackJsonp../node_modules/ag-grid/dist/lib/environment.js.Environment.getTheme (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\environment.js:76) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.specialForNewMaterial (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:636) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.getHeaderHeight (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:352) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.getGroupHeaderHeight (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:368) at GridPanel.webpackJsonp../node_modules/ag-grid/dist/lib/gridPanel/gridPanel.js.GridPanel.setBodyAndHeaderHeights (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridPanel\gridPanel.js:1193) at GridPanel.webpackJsonp../node_modules/ag-grid/dist/lib/gridPanel/gridPanel.js.GridPanel.init (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridPanel\gridPanel.js:191) at C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\context\context.js:215 at Array.forEach (<anonymous>) at C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\context\context.js:215 at Array.forEach (<anonymous>)

我收到一个 Vue 警告：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <AgGridVue>
       //....

有什么线索吗？

【问题讨论】：

嘿，你能在示例 repo 中重现问题吗？我可以看看。该错误意味着网格无法找到具有“ag-theme-material”类集的元素。不过，为什么会这样很难说。

这是一个带有示例的仓库。我实际上遇到了一个不同的错误，未找到“MouseEvent”，这更令人困惑..github.com/bahatron/agGrid-Nuxt-sample.

s-s-r 中的鼠标事件是已知问题 - github.com/ag-grid/ag-grid/issues/2187。不过，我不是 Vue 专家 - 请告诉我如何重现您最初提到的问题。

我会先尝试使用“”，看看是否有错误。我有一种胆量感觉存在一些链接问题，与 css 主题无关。

【参考方案1】：

ag-grid 找不到 css。这就是为什么您需要将这些行添加到您的 nuxt.config.js 文件中：

module.exports = 
  css: [
    '@/node_modules/ag-grid/dist/styles/ag-grid.css',
    '@/node_modules/ag-grid/dist/styles/ag-theme-material.css'
  ],
build: ect...

要解决其他应答器问题（如 MouseEvent 错误），请将其放入构建中：

build: 
  extend (config, context) 
    config.resolve.alias['vue'] = 'vue/dist/vue.common'
  

【讨论】：

这解决了问题！非常感谢。我将更新 github repo 示例，以便人们可以看到它的工作原理！

它适用于 ag-grid-vue@^15.0.0 但不适用于 ag-grid-vue@^16.0.0 我更新了一个仓库，展示了一个在 Nuxt 上工作的 ag-grid 表（已标记）然后将 ag-grid 更新到 v16 没有成功github.com/bahatron/agGrid-Nuxt-sample

我知道这个问题，所以我也将版本号降级回 15.0.0... "MouseEvent undefined" 关于该问题的问题：github.com/ag-grid/ag-grid/issues/2187

有人在 ag-grid 17 上工作吗？我在Nuxt: Cannot read property 'match' of undefined

遇到了这个确切的问题

@YeB：我现在也在使用 ag-grid v17.0，但我没有这个问题。也许您需要从 node_modules 中卸载网格，然后再次安装它。我希望它能解决你的问题。