UI组件库Kendo UI for Vue中文入门指南（三）

科技 06-15 来源：慧都科技

在本文中，您将通过构建一个包含 Grid、DropDownList、Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件。

6. 添加Kendo UI for Vue数据网格

Kendo UI for Vue Data Grid提供了100+个即用型功能，涵盖从分页、排序、过滤、编辑和分组到行和列虚拟化以及 Excel 导出的所有内容。在本节中，您将尝试其中的几个功能，但让我们从一个简单的网格开始。

将 Grid 组件、process包和products.json文件导入到 src/App.vue 文件中。

import products from './appdata/products.json';
import { process } from '@progress/kendo-data-query';
import { Grid } from '@progress/kendo-vue-grid';

添加下面的代码来创建一个绑定到您产品列表的网格，将其添加到src/App.vue 文件内模板中包含 DropDownList 的

之后。

使用以下代码定义 Grid 组件：

export default {
name: 'App',
components: {
'dropdownlist': DropDownList,
'grid': Grid,
},
//..............

在数据选项中添加以下行：

data: function() {
return {
categories: categories,
products: products,
columns: [
{ field: 'ProductName', title: 'Product Name'},
{ field: 'UnitPrice', title: 'Price' },
{ field: 'UnitsInStock', title: 'Units in Stock' },
{ field: 'Discontinued'}
]
//..............
}
}

当你的浏览器刷新时，会看到第一个网格！很简单，但还不是很真实。

要填写此示例，让我们使用 Grid API 添加下面的功能列表。通读特性，然后获取更新后的 App.vue 代码（如下），亲自尝试更新后的 Grid。

向 Grid 添加高度样式来激活滚动。
添加用户友好的列标题。
格式化价格列中的数字。
启用分页和排序，这将需要对应用程序代码进行一些添加，如下所述。
将 Discontinued 列中的布尔值显示为复选框，为此将通过cell 属性和自定义组件自定义表格单元格渲染。

以下是我们如何实现上述功能：

在 Grid 声明中分别启用每个数据操作（:pageable="pageable" 和 :sortable="sortable"），在数据选项中添加以下属性。

data: function() {
return {
//..............
pageable: true,
sortable: true,
//..............
}
}

配置数据操作设置和网格数据的初始状态，例如：最初的skip将是第一个。页面大小 (take) 将为 10。网格最初将按产品名称排序。将所有这些设置保存在数据属性中，并使用以下代码将它们添加到网格中：

data: function() {
return {
//..............
skip: 0,
take: 10,
sort: [
{ field: "ProductName", dir: "asc" }
]
//..............
}
}

为了显示正确的 Grid 数据，我们将 Grid 绑定到函数的输出，替代直接绑定到 products 数组。将使用导入的进程函数，它是 kendo-data-query 包的一部分，该函数的结果将存储在 dataResult 数据属性中。
定义一个 dataStateChange 处理程序，它做了两件事：在每次用户交互后通过 createAppState 函数更新 take、skip、filter 和 sort 数据属性的状态。数据属性更新后，该函数所做的第二件事是从流程函数中获取结果并将其设置为 dataResult 属性，这将导致 Grid 刷新并显示预期的数据。要显示应用的数据更改，我们必须将 Grid 的 data-items 属性更改为 :data-items="dataResult"。
为 Grid 的 Discontinued 字段定义模板，在 src/App.vue 文件的模板部分的 grid 标签内添加以下内容：

通过为 Discontinued 单元格添加单元格属性来编辑列数据属性。

columns: [
{ field: 'ProductName', title: 'Product Name'},
{ field: 'UnitPrice', title: 'Price' },
{ field: 'UnitsInStock', title: 'Units in Stock' },
{ field: 'Discontinued', cell: 'discontinuedTemplate' }
]