Kendo UI网格数据变量Vue.js [英] Kendo UI Grid Data variable Vue.js
本文介绍了Kendo UI网格数据变量Vue.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在kendo UI中，是否可以使用Vue.js中变量的数据加载网格?
In the kendo UI it is possible to load the grid with data from a variable in the Vue.js?
推荐答案
是的，您可以绑定到数据源属性，而不使用data-source-ref.这可以是Kendo DataSource的实例，也可以是简单数组.
Yes, instead of using a data-source-ref, you can bind to a data-source property. This can be an instance of an kendo DataSource or a simple array.
例如，这是默认演示，已更改绑定到对象数组.
For example, here's the default demo, changed to bind to an array of objects.
var products = [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18,
"UnitsInStock": 39,
"Discontinued": false
},
{
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19,
"UnitsInStock": 17,
"Discontinued": false
}, {
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"UnitPrice": 10,
"UnitsInStock": 13,
"Discontinued": false
}
];
new Vue({
el: '#app',
data: {
products: products
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/@progress/kendo-all-vue-wrapper/dist/cdn/kendo-all-vue-wrapper.min.js"></script>
</head>
<body>
<div id="example">
<div id="app">
<kendo-grid :height="550" :data-source="products">
<kendo-grid-column field="ProductName"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
<kendo-grid-column field="Discontinued" :width="120"></kendo-grid-column>
</kendo-grid>
</div>
</div>
</body>
</html>
这篇关于Kendo UI网格数据变量Vue.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
