在Vue2中
实现树形菜单可以通过递归组件的方式来完成。下面是一个简单的示例：
首先，你需要有一个数据源，该数据源包含了
树形结构的数据。例如：
```
javascript
data() {
return {
menuData: [
{
id: 1,
name: '
菜单1',
children: [
{
id: 2,
name: '
菜单1-1',
children: []
},
{
id: 3,
name: '
菜单1-2',
children: [
{
id: 4,
name: '
菜单1-2-1',
children: []
}
]
}
]
},
// 其他
菜单项...
]
}
}
```
然后，你可以创建一个递归组件，该组件用于渲染
树形菜单的每个子项。例如：
```
html
<template>
<ul>
<li v-for="item in menuData" :key="item.id">
{{ item.name }}
<TreeMenu :menuData="item.children" v-if="item.children.length > 0" />
</li>
</ul>
</template>
<script>
export default {
name: 'TreeMenu',
props: {
menuData: {
type: Array,
required: true
}
}
}
</script>
```
在上面的代码中，我们使用了`v-if`指令来判断当前
菜单项是否有子
菜单，如果有则递归地渲染`TreeMenu`组件，将子
菜单作为其`menuData`属性传递进去。
最后，在你的父组件中，你可以使用这个递归组件来渲染整个
树形菜单：
```
html
<template>
<div>
<TreeMenu :menuData="menuData" />
</div>
</template>
<script>
import TreeMenu from './TreeMenu.vue'
export default {
name: 'App',
components: {
TreeMenu
},
data() {
return {
menuData: [
//
菜单数据...
]
}
}
}
</script>
```
这样，你就可以通过递归组件的方式
实现树形菜单了。每个子
菜单项都会根据是否有子
菜单进行渲染，从而形成
树形结构。
js实现树形菜单
最低0.47元/天 解锁文章
3561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
