使用VueJS的Ag-Grid (vanillajs)
使用VueJS的Ag-Grid (vanillajs)
提问于 2020-01-02 23:32:47
我正在尝试使用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>)我也尝试过this solution，但也没有成功。
你能告诉我如何继续吗？
回答 1
Stack Overflow用户
发布于 2020-01-31 23:28:46
我已经找到解决方案了。
我需要做的第一件事就是按照this solution.中的建议添加行
在ag-grid-vue.umd.js中添加此行后；
window.AgGridVue = AgGridVue;在这一行之前；
return AgGridVue;
}(external_commonjs_vue_commonjs2_vue_root_Vue_default.a));通过这种方式，我将AgGridVue变量绑定到窗口对象中，因此它可以在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-camelCase-vue tag (as I explained in here)中使用camelCase属性名称。相反，您必须使用kebap-case声明..
通过这种方式，一切都能正常工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59565934
复制相关文章
相似问题
腾讯云开发者
