时间戳

首页 > 解决方案 > 带有 VueJS 的 Ag-Grid (vanillajs)

vue.js - 带有 VueJS 的 Ag-Grid (vanillajs)

问题描述

我正在尝试使用 VueJS 实现 Ag-Grid，但使用的是 vanillajs 版本（没有任何包或模块管理器）。

我尝试使用 umd 版本的 ag-grid ( https://cdn.jsdelivr.net/npm/ag-grid-vue@22.1.1/dist/ag-grid-vue.umd.js )，如下所示例子。

https://jsfiddle.net/p429h0sL/

但是抛出了以下错误；

vue.js:634 [Vue warn]: Unknown custom element: <ag-grid-vue> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

我也尝试过这个解决方案，但也没有运气。

你能告诉我如何进行吗？

标签： vue.jsag-gridag-grid-vue

解决方案

我找到了解决方案。

我需要做的第一件事是按照此解决方案中的建议添加行。

在 ag-grid-vue.umd.js 中添加这一行之后；

window.AgGridVue = AgGridVue;

在此行之前；

     return AgGridVue;
}(external_commonjs_vue_commonjs2_vue_root_Vue_default.a));

这样，我将 AgGridVue 变量连接到 window 对象中，从而可以在 js 环境中全局使用。

第二件事，我调用了正确的 js 文件

<script src="ag-grid-community.min.js"></script>
<script src="ag-grid-enterprise.min.js"></script> <!-- This line is optional, if you want to use enterprise features -->
<script src="vue.js"></script>
<script src="ag-grid-vue.umd.js"></script> <!-- This is the manipulated file -->

之后我实例化了 Vue 和 ag-grid

<div id="vue" style="width:100%;height:600px">

    <ag-grid-vue style="width:100%;height:600px" class="ag-theme-bootstrap" :column-defs="columnDefs"
        :row-data="rowData" ></ag-grid-vue>

</div>

 <script>

    let vueData = {
        gridApi: null,
        rowData: [{test:1}],
        columnDefs: [{field:"test",headerName:"test"}]
    };

    window.onload = function () {



        Vue.component("ag-grid-vue", AgGridVue);

        let vue = new Vue({
            el: "#vue",
            data: vueData,
        })

    }
</script>

重要提示：您不应在ag-grid-vue标记中使用camelCase属性名称（正如我在此处解释的那样）。相反，您必须使用kebap-case声明..

这样一切正常。

推荐阅读