vue树形列表,vue树结构自定义树节点内容
在做项目中，会遇到一些树形的数据结构，常用在左侧菜单导航，本文就介绍一下如何实现，感兴趣的可以了解一下
目录
组件递归调用使用提出方法在做项目中，会遇到一些树形的数据结构，常用在左侧菜单导航，或者评论引用等地方，这种数据结构有个特点是不知道它会嵌套多少层，所以用模板去展示这样的数据时就有点棘手，这篇文章梳理两种展示这种数据结构的方法。
文章中用到的数据是下面这个：
主数据：{
值："根",
孩子：[{
值： 层级1-1,
孩子：[{
值： 层级2-1,
孩子：[{
值： 层级3-1,
儿童：[]
}]
},{
值： 层级2-2,
儿童：[]
}]
},{
值： 层级1-2,
儿童：[]
}]
}
也就是下面这个样子。
组件递归调用
第一种是组件递归调用自己的方式，创建一个组件，该组件在引用自己去展示孩子们的数据，子组件如下：
模板
差异
div class=demo
{{treeData.value}}
treeData中的tree-comp v-for=(item，index)。 children :treeData= item /tree-comp
/div
/div
/模板
脚本
导出默认值{
名称：“treeComp”，
道具：{
treeData: {
默认值：函数(){
返回{}
}
}
},
已安装(){},
方法：{}
}
/脚本
style lang=less 范围。demo { padding:5px 0；边距：1px 10px文本对齐：左对齐；字体大小：16px最大宽度：500像素；边框-左侧：1px虚线# 999;
：在{内容：-之前；显示：内嵌-块；填充：0 4px}
}
/风格
然后创建父组件，父组件使用子组件，并将数据传入子组件。
模板
tree-comp:treeData=主数据/tree-comp
/模板
脚本
导出默认值{
名称： treeMain ，
data () {
返回{
主数据：{
值："根",
儿童：[
{
值： 层级1-1,
孩子：[{
值： 层级2-1,
孩子：[{
值： 层级3-1,
儿童：[]
}]
},{
值： 层级2-2,
儿童：[]
}]
},{
值： 层级1-2,
儿童：[]
}
]
}
}
},
组件：{
tree-comp: ()=import(./tree comp’)
},
已安装(){},
方法：{}
}
/脚本
关于递归组件的内容，在官方文档里是有提到的-递归组件
使用render方法
除了使用组件的方式，也可以使用某视频剪辑软件的提出方法，去利用Java脚本语言的完全编程的能力，实现递归处理树形数据，从而展示出无限层级树。如下：
模板
tree-comp:treeData=主数据/tree-comp
/模板
脚本
导出默认值{
名称： treeRender ，
data () {
返回{
主数据：{
值："根",
儿童：[
{
值： 层级1-1,
孩子：[{
值： 层级2-1,
孩子：[{
值： 层级3-1,
儿童：[]
}]
},{
值： 层级2-2,
儿童：[]
}]
},{
值： 层级1-2,
儿童：[]
}
]
}
}
},
组件：{
treeComp:{
功能性：真的，
道具：{treeData: Object}，
render(h，{ props:{ treeData={ } }){
const creatNode=(node)={
如果(节点。子节点。孩子。长度0){
设hArr=node。孩子。地图(项目={
返回创建节点（项目)
})
返回h(div ，{class:demo}，[node.value，hArr])
}否则{
返回h(div ，{class:demo}，[node.value])
}
}
返回创建节点(树数据)
},
}
},
已安装(){},
方法：{}
}
/脚本
style lang=less 范围。demo { padding:5px 0；边距：1px 10px文本对齐：左对齐；字体大小：16px最大宽度：500像素；左边框：1px虚线# 999；
:在{content: -之前；显示：内嵌-块；填充：0 4px}
}
/风格
其核心是在render方法中，creatNode方法先递归深度遍历树数据，生成vnode，然后渲染页面。
以上就是本文关于VUE无限层次树数据结构显示的实现。有关VUE无限分层树结构的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。