Vue Grid的Kendo UI是一个数据可视化和编辑组件，提供了100多个现成的功能来操作加载的数据。分页、排序、过滤、编辑、分组、行和列虚拟化、导出为PDF和Excel是该组件提供的内置功能的一部分。最重要的是，该组件与所有组件都兼容第508节要求，可由流行的屏幕阅读器访问，并提供完整wai - aria支持。

Vue Grid的Kendo UI从头开始构建，零依赖，基于我们在制作企业级网格方面10多年经验中收集的反馈和专门知识，提供了闪电般的性能和高度可定制的功能。

剑道用户界面为Vue网格的例子

行和列虚拟化

当谈到大型数据集(数十万个数据项)时，最有用的Grid组件特性之一是虚拟化。有了它，Grid当前可见区域之外的所有列或行都不会显示在DOM树中，从而提高了呈现性能，加快了页面和数据加载速度。

剑道用户界面为Vue网格虚拟化演示

vue数据网格包括一个内置指示器，显示数据操作正在进行。每当数据加载时，用户都会看到一个旋转的图标。在需要实现自己的指示器的情况下，支持自定义指示器。

Vue Grid的Kendo UI提供了一个直观的功能，通过更改特定记录大小的页面来浏览组件的数据。上一页、下一页或第n个数据页可以通过一次单击轻松访问。页面的大小可以由用户预先定义或动态更改，从而减少在组件中一次性加载的数据总量。使用Grid页面，您可以提高应用程序的性能，并使用户专注于选定的数据集。

数据排序是每个数据网格最重要的特性之一。当Vue Grid的Kendo UI启用排序时，用户只需单击标题就可以对列的数据进行排序。单击列标头将更改三种可能状态(升序、降序或无)之间的排序模式。

排序可以同时应用于一个或多个列。在加载组件时预定义并应用，或者在所有数据显示时单击激活组件，由您决定如何使用Vue Grid的Kendo UI的排序功能。

Vue Grid的Kendo UI的过滤功能甚至可以给最苛刻的用户留下深刻的印象。该组件附带多个过滤器选项，可以在每列上方的专用过滤器行中使用，也可以单击列标题中的过滤器菜单使用。对于那些喜欢自定义或更改内置功能的人，Grid提供了一个配置来定义一个自定义组件，该组件将处理选定数据列的过滤。

Vue Grid的Kendo UI的分组允许用户将列拖到列标题上方的分组标头，从而根据拖放单元格的值对数据进行分组。在分组时，Grid中的每个组都可以单独展开和折叠。还可以对组进行排序。最后但并非最不重要的是，我们可以自定义每个组的页眉和页脚，以显示不同的聚合信息，如“Average”，“Sum”，“Min”或“Max”。

Vue Grid的Kendo UI的流行用例场景之一是编辑其数据项。为了满足所有用户的需求，组件提供了三种基本数据编辑方法:

• 单元内编辑模式-单击单元格并编辑其数据。
• 内联编辑模式—选中一行，编辑激活行的所有数据字段。
• 外部表单编辑模式-单击按钮并在弹出的外部表单中编辑行数据

Vue Grid的Kendo UI具有内置的单行和多行选择。它还提供了对所选行外观的简单自定义。各种组件的API提供了以编程方式选择Grid行、提取所选项的数据或与所选行的数据交互的方法。为了便于交互，可以将带复选框的列添加到组件中，从而为行选择/取消选择提供更直观的方法。

Vue Grid的Kendo UI允许用户调整大小，重新排序，拖动分组，显示或隐藏列。列出的每个选项都可以一般地为组件指定，也可以逐列定义。有了这些配置设置，Grid可以自由地对其数据及其显示方式进行几乎所有操作。

Vue Data Grid支持这样的场景:当底层数据模型发生变化时，开发人员需要更新列。这可以包括显示和隐藏列，以及应用过滤器。

参见Vue数据网格动态列显示演示

当Grid组件中有许多列时，经常会出现这样的情况:我们需要在滚动数据时不断地显示其中的一个、两个或任意数量的列。对于这样的grid，组件提供了将所选列(id、编辑命令列、其他重要列等)设置为锁定列的选项。通过这种配置，我们可以在Grid的开头、结尾甚至组件的中间锁定列。被锁定的中间列被称为“粘滞”列，基于水平滚动，它被锁定在网格的开头或结尾。

Vue数据网格允许您指定要固定到视口底部顶部的行。这样，当用户在它们上面或下面滚动视图时，它们将“粘”在顶部或底部。

参见Vue数据网格粘行演示

Grid中的列标头与绑定到组件的数据字段绑定在一起。使用列的标题配置，我们可以指定列的标题，但是当我们需要在两个或多个列之间共享标题时，会发生什么呢?

Vue Grid的Kendo UI用其多列标题功能回答了上述挑战。有了它，列标头可以跨越多个子列，从而实现复杂的分组和数据结构。

剑道用户界面的Vue网格-多标题列

Vue Grid的Kendo UI内置集成PDF和Excel导出库，提供开箱导出数据到这两种流行格式。在设置了正确的配置之后，只需单击一下，就可以在生成结果文件之前动态地导出所有Grid数据(只导出其中选定的部分)，或者自定义导出数据的独特外观。

网格可以加载无限数量的子网格，在显示的数据之间形成分层的父子关系。使用这种层次结构，子grid中显示的数据取决于父行的值。根据业务场景的需求，每个嵌套的grid都可以配置为组件可用的所有特性，也可以配置为有限数量的功能。

剑道用户界面的Vue网格-层次网格的例子

在许多场景中，我们需要使用用户友好的方法显示给定Grid行的附加信息。这就是Grid的细节行特性为开发人员提供了关于可以在“展开行”下面加载数据的自由的地方。因此，只需单击一次，就可以在展开的Grid区域中显示自定义内容。

当需要在Grid中进行数据编辑或显示时，组件提供了为读取和编辑模式定义自定义呈现器的选项。有了组件支持的这个特性，开发人员可以自由地控制Vue Grid的Kendo UI中显示的所有内容。

剑道用户界面为Vue网格单元模板演示

Grid组件可以由流行的屏幕阅读器访问。它提供了充分的wai - aria可访问性支持，并与第508节要求。通过其内置的键盘导航，用户可以与组件的所有部分进行交互，或者仅使用键盘导航其数据。