Kendo UI 网格数据变量 Vue.js答案

【问题标题】：Kendo UI Grid Data variable Vue.jsKendo UI 网格数据变量 Vue.js
【发布时间】：2018-05-06 15:14:34
【问题描述】：

在剑道 UI 中，是否可以使用 Vue.js 中的变量中的数据加载网格？

【问题讨论】：

标签： kendo-ui vue.js kendo-grid kendo-ui-vue

【解决方案1】：

是的，这是可能的。在网格操作中，尝试@Select 并实现函数OnSelect (e)。这就是您可以从对象e 获取数据的方式。

【讨论】：

【解决方案2】：

是的，您可以绑定到数据源属性，而不是使用数据源引用。这可以是一个 kendo 数据源的实例或一个简单的数组。

例如，这里的default demo，改为绑定到对象数组。

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>

【讨论】：