用原生js写一个树形组件
时间: 2024-05-11 10:19:38 浏览: 15
写一个树形组件可以使用递归的方法,把树的每个节点看作一个单独的元素,然后判断该节点是否有子节点,如果有,则对子节点递归调用这个过程,如果没有,则表示该节点是叶子节点,不再递归。
下面是一个简单的实现:
```
// 构建树形数据
var data = {
name: 'root',
children: [
{
name: 'node1',
children: [
{
name: 'node1-1',
children: []
},
{
name: 'node1-2',
children: []
}
]
},
{
name: 'node2',
children: [
{
name: 'node2-1',
children: []
},
{
name: 'node2-2',
children: []
}
]
}
]
};
// 递归渲染树形组件
function renderTree(node) {
var tree = document.createElement('ul');
var nodeElem = document.createElement('li');
nodeElem.textContent = node.name;
tree.appendChild(nodeElem);
if (node.children.length) {
node.children.forEach(function(childNode) {
nodeElem.appendChild(renderTree(childNode));
});
}
return tree;
}
// 初始化树形组件
var tree = renderTree(data);
document.body.appendChild(tree);
```
这是一个简单的树形组件实现,可以作为参考。你可以根据需要进行更改和优化。