vue2中树形算法代码举例
时间: 2023-10-13 16:10:44 浏览: 30
很高兴为您解答问题!以下是一个简单的 Vue 2 树形算法示例:
```
<template>
<div>
<ul>
<li v-for="node in tree" :key="node.id">
{{ node.name }}
<ul v-if="node.children">
<tree-node v-for="child in node.children" :node="child" :key="child.id"></tree-node>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Tree',
props: {
data: {
type: Array,
required: true
}
},
computed: {
tree () {
const map = {}
const roots = []
this.data.forEach(node => {
map[node.id] = node
node.children = []
})
this.data.forEach(node => {
if (node.parentId) {
map[node.parentId].children.push(node)
} else {
roots.push(node)
}
})
return roots
}
}
}
Vue.component('tree-node', {
props: ['node'],
template: '<li>{{ node.name }}<ul><tree-node v-for="child in node.children" :node="child" :key="child.id"></tree-node></ul></li>'
})
</script>
```
希望对您有所帮助!