树形结构+html+原生,树形结构递归/原生js实现/vue递归组件

Document

• 后台
• 前端

let treeData = [

{

name:"后台",

children: [

{

name: "数据库",

}, {

name: "服务器",

}, {

name: "java",

}

]

},{

name:"前端",

children: [

{

name: "vue",

}, {

name: "react",

}, {

name: "angular",

}

]

}

]

// 纯字符串拼接

// let str = "";

// str += "

• "

// for(var i = 0; i < treeData.length; i ++) {

// str += "

" + treeData[i].name +

// if(treeData[i].children.length > 0) {

// for(var j = 0; j < treeData[i].children[j].length; j ++ ) {

// "

• " +

// "

" + treeData[i].children[j].name + "" +

// "

"

// }

// }

// + "

"

// }

// str +="

"

// document.body.innerHTML = str;

// 递归

// let str = "";

// function recur(tree) {

// for(var i = 0; i < tree.length; i ++) {

// str += `

//

//

${tree[i].name}

// ${tree[i].children.length > 0 && recur(tree[i].children)}

//

// `

// }

// }

// recur(treeData);

// document.body.innerHTML = str;

//

var loop = (treeData) => {

return treeData.map(e => {

return e.children?

`

${e.name}

• ${loop(e.children)}

`

:

`

${e.name}

`

})

}

var html = loop(treeData).join("");

console.log(html);

document.body.innerHTML = html