推荐开源项目:Vue-Tree-List - 灵活高效的树形数据列表组件
<template>
<tree-list :model="treeData" />
</template>
<script>
import TreeList from 'vue-tree-list'
export default {
components: {
TreeList
},
data() {
return {
// 示例树形数据
treeData: {
id: 1,
label: '根节点',
children: [
{
id: 2,
label: '子节点1',
children: [
{
id: 3,
label: '子节点1-1'
},
{
id: 4,
label: '子节点1-2'
}
]
},
{
id: 5,
label: '子节点2'
}
]
}
}
}
}
</script>
这个例子展示了如何在Vue应用中使用vue-tree-list
组件来展示一个简单的树形结构。treeData
对象定义了树的结构,每个节点至少包含id
和label
属性。在模板中,我们只需要使用<tree-list>
组件并通过:model
属性绑定这个树形数据即可。
评论已关闭