Vue Tree List组件的Kendo UI是集合中最强大、最灵活的数据组件之一。该组件也被视为树形网格,非常适合同质和分层的数据,这意味着所有数据项都具有相同的字段,并且每个级别将其列与父元素和子元素对齐。Angular的TreeList提供了一些有用的特性,比如列交互、分组和聚合。Vue TreeList的每个列都可以调整大小,通过拖放重新排序,并通过专用列菜单隐藏。
终端用户可以快速创建,更新和删除项目时,编辑在剑道UI为Vue TreeList启用。当用户输入或单击单元格时,可用的编辑选项显示在单元格级别,或者显示在逐行基础上以将整行设置为编辑模式。还可以在外部表单中编辑数据项。
Vue TreeList允许用户通过拖放功能重新排列行。此功能还可以用于重新排列Vue TreeList中的层次结构,允许将子行拖到父级,如果需要甚至拖到根级。
通过列过滤将数据视图缩小到用户想要看到的内容。您可以通过编程方式完成此操作,也可以通过提供筛选器行来允许消费者设置自己的筛选器。默认情况下,筛选器行将在每列的顶部添加一个文本筛选器。您还可以创建自定义筛选单元格,您可以在其中决定是否包含自由格式的文本区域、下拉框或任何您喜欢的内容。
Vue TreeList允许用户按一个或多个列对数据进行排序,从而帮助他们获得所需的视图。他们可以通过单击列标题显式地执行此操作,但也可以通过编程方式进行排序。
为了帮助处理大型数据集,Vue TreeList支持分页。配置此功能后,该组件将在包含您选择的行数的页面中加载数据。然后,用户可以从一个页面移动到另一个页面,当他们导航时,所选页面的数据将出现。
为了优化性能,Vue TreeList支持虚拟滚动。启用此功能后,组件将只加载可容纳在可见区域内的数据子集。当用户滚动时,将加载额外的行。这避免了处理大型数据集时可能导致的长加载时间。
Vue TreeList通过使用列聚合帮助您汇总数据。当使用此特性时,组件将在页脚中显示列组聚合函数的结果。支持的函数包括:
为了帮助您为用户提供所需的用户体验,Vue TreeList包含了一个工具栏。您可以使用此元素添加下拉菜单和按钮等元素,以帮助用户进行交互。这些元素可以是任何HTML控件或Vue组件的其他Kendo UI。
Vue TreeList导出到Excel的功能是一个巨大的生产力助推器。你所需要做的就是设置“excel”属性,然后导出按钮就会出现在组件的标题区域。您还可以通过设置文件名等属性和其他特定于格式的选项来控制导出的文件。例如,您可以在生成的XLSX文件中设置过滤。
Vue TreeList包含一个内置的PDF导出功能。启用后,组件将在组件顶部显示一个带有“Export to PDF”按钮的工具栏。可以将输出配置为仅导出当前显示的数据,或者导出整个数据集。此外,每个PDF文件都可以添加额外的PDF内容以及自定义纸张大小(包括边距和填充设置),以确保生成的PDF可以满足任何要求。
为了确保最高级别的用户体验和可访问性,Vue TreeList支持一长串键盘快捷键。喜欢或需要使用键盘而不是鼠标的用户将喜欢能够导航并与组件交互。
与Vue组件的其他Kendo UI一样,TreeList通过简化UI消息的翻译和自动应用当前语言环境的适当符号来支持全球化过程。