Vuetify

商店

企业版

v-treeview 组件对于显示大量嵌套数据很有用。

一个基本示例

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

密集模式提供了更紧凑的布局,同时降低了项目的高度。

您可以控制所选节点复选框的颜色。

您可以控制活动的树形视图节点的文本和背景颜色。

形状的树形视图在节点的一侧具有圆形边界。

您可以使树视图节点变成圆角。

设置 item-disabled 属性可当设置为 true 时,以控制哪个节点的属性会禁用该节点。

树形视图现在支持两种不同的选择类型。 默认类型是 'leaf',它仅在 v-model 数组中包括叶节点,但会将父节点呈现为部分或完全选择状态。 另一种模式是 'independent',它允许选择一个父节点,但是每个节点都独立于其父节点和子节点。

您可以轻松选择树形视图节点和子节点。

树形视图节点可以将其激活。

树形视图节点可以具有悬停效果。

树形视图节点可以在页面加载时预先打开。

使用插槽,我们可以创建一个直观的文件浏览器。 除了 prepend 插槽外,还有一个用于 labelappend 插槽。

使用 search 属性轻松过滤您的树形视图。 如果需要区分大小写或模糊过滤,可以通过设置 filter 属性轻松地应用自定义过滤功能。 这类似于 v-autocomplete 组件。

您可以通过向 load-children 属性提供 Promise 回调来动态加载子数据。 用户首次尝试扩展具有子属性(为空数组)的项目时,将执行此回调。

为您的可选树形视图自定义 on, offindeterminate 图标。 与其他高级功能(如 API 加载项)结合使用。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!