Vue中的Ag-Grid没有npm安装示例？ [英] Ag-Grid in Vue no npm install example?

问题描述

我想使用 ag-grid-vue 而不安装 npm 。

代码：

调试模式代码笔：

指示在 ag-grid-vue 标记中，您不应使用：row数据如下；

 < ag-grid-vue：rowData = rowData：columnDefs = columnDefs  /> 
  

此用法是错误的，如Vue的控制台警告中所述。

您应使用烤肉架而不是骆驼套，如下所示：

 < ag-grid-vue：row-data = rowData：column-defs = columnDefs /> 
  

这实际上按预期工作。

我相信，骆驼式保护套可以在存在模块加载器的环境中工作。

I want to use ag-grid-vue without npm installing it.

code: https://codepen.io/riodw/pen/zYYOjdE

---

So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."

1. I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
2. Went into cd ag-grid-master/packages/ag-grid-vue
3. npm installed npm install
4. Then built npm run build

This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:

window.AgGridVue = AgGridVue;
return AgGridVue;

Then include that file with the ag-grid-community file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>

And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.

Image of render:

Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA

解决方案

Everything you do is correct except one tiny thing.

I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;

Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;

<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>

this usage is wrong as stated in the console warning from Vue.

You should use kebab-case instead of camel-case as below;

<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>

This actually works as expected.

I beleive, camel-case works in an environment with the presence of module-loader.

这篇关于Vue中的Ag-Grid没有npm安装示例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！