# Treeview(树形视图)

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

# 使用

一个基本示例

# API

# 示例

# 属性

# 可激活

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

# 颜色

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

# 密集模式

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

# 可悬停的

hoverable 属性令树形视图节点可以具有悬停效果。

# 禁用项目

设置 item-disabled 属性,控制节点哪个属性在设置为 true时禁用节点。

# 加载子项

您可以通过提供 promise 回调到 load-children 属性,来动态加载子数据。 此回调将在用户首次试图扩展一个包含一个空数组的子属性的项目时执行。

# 打开全部

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

# Rounded(圆角)

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

# 可选择

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

# 选择颜色

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

# 选择类型

属性视图支持两种不同的选择类型。 默认类型是 leaf,它在 v-model 数组中只包含选中的叶节点。 但会渲染父节点状态为全选或半选。 另一种模式是 independent,允许选择父节点,但每个节点都独立于其父节点。

# 形状

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

# 插槽

# 附加和标签

使用 label和一个 append 插槽,我们能够创建一个直观的文件浏览器。

# 其他

# 搜索&过滤

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

# 可选择的图标

为你的可选择树形视图自定义 选中, 未选中 以及 半选 图标。 与诸如API加载项目等其他高级功能合并。

了解更多?

继续学习由 我们的团队 选择的相关内容,或通过使用下面的导航链接在页面之间跳转。
GitHub 上编辑此页面
最后更新:11/12/2024, 6:59:50 AM