<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> var tree=[ { id:1, label:"1级目录1", children:[ { id:"1-1", label:"1.1目录" }, { id:"1-2", label:"1.2目录" }, { id:"1-3", label:"1.3目录" }, ] }, { id:2, label:"1级目录2", }, { id:3, label:"1级目录3", children:[ { id:"3-1", label:"3.1目录" }, { id:"3-2", label:"3.2目录", children:[ { id:"3-2-1", label:"3.2.1目录" }, { id:"3-2-2", label:"3.2.2目录" }, { id:"3-2-3", label:"3.2.3目录" } ] } ] }, { id:4, label:"1级目录4", children:[ { id:"4-1", label:"4.1目录" }, { id:"4-2", label:"4.2目录", children:[ { id:"4-2-1", label:"4.2.1目录" } ] } ] }, { id:5, label:"1级目录5", children:[ { id:"5-1", label:"5.1目录", children:[ { id:"5-1-1", label:"5.1.1目录" }, { id:"5-1-2", label:"5.1.2目录", children:[ { id:"5-1-2-1", label:"5.1.2.1目录" }, ] } ] }, { id:"5-2", label:"5.2目录" } ] }, ]; var render = function(tree) { if (!tree) return null var ul = document.createElement('ul'); for(var i = 0; i < tree.length;i++){ var li = document.createElement('li') // 创建span标签 var span = document.createElement('span'); span.innerText = tree[i].label; li.appendChild(span); if(tree[i].children){ var sub = render(tree[i].children); li.appendChild(sub); } ul.appendChild(li); } return ul }; document.body.innerHTML = ''; document.body.appendChild(render(tree)); </script> </body> </html>
看下结果
总结
以上所述是小编给大家介绍的vue用递归组件写树形控件的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: