下面我将详细讲解vue左侧菜单、树形图递归实现的完整攻略。
一、什么是递归
在开始讲解之前,我们需要了解什么是递归。递归是指通过函数体内调用自己的方式,重复执行某段代码的过程。
二、vue左侧菜单代码实现
1. 父组件
我们需要先创建一个父组件,来渲染整个左侧菜单。
<template>
<div class="menu">
<template v-for="item in menus">
<tree-node :item="item" @on-click="childClick"></tree-node>
</template>
</div>
</template>
<script>
import TreeNode from './TreeNode'
export default {
name: 'SideMenu',
components: {
TreeNode
},
data() {
return {
menus: [
{
"name": "dashboard",
"icon": "el-icon-menu",
"title": "Dashboard",
"children": []
},
{
"name": "user",
"icon": "el-icon-user",
"title": "User Management",
"children": [
{
"name": "user-list",
"path": "/user/list",
"title": "User List",
"children": []
},
{
"name": "user-add",
"path": "/user/add",
"title": "Add User",
"children": []
},
{
"name": "user-edit",
"path": "/user/edit",
"title": "Edit User",
"children": []
}
]
}
]
}
},
methods: {
childClick(e) {
this.$emit('on-click', e)
}
}
}
</script>
2. 子组件
接下来,我们需要创建一个子组件,来实现递归式的渲染。
<template>
<div class="tree-node">
<el-tooltip :content="item.title">
<span class="menu-item" @click="clickHandler(item)">
<i :class="item.icon"></i>
<span>{{ item.title }}</span>
</span>
</el-tooltip>
<template v-if="item.children && item.children.length">
<tree-node v-for="child in item.children" :key="child.name" :item="child" @on-click="clickHandler"></tree-node>
</template>
</div>
</template>
<script>
export default {
name: 'TreeNode',
props: {
item: {
type: Object
}
},
methods: {
clickHandler(item) {
this.$emit('on-click', item)
}
}
}
</script>
这里我们来简单解释下子组件的递归渲染方式。
首先,我们通过v-if判断当前节点是否有子节点,如果有,则通过v-for循环渲染子节点。
接着,我们通过递归调用tree-node组件来渲染子节点,这样就能轻松实现递归效果。
三、树形图递归实现代码
接下来,我们来看看vue中如何通过递归实现树形图。
1. 父组件
我们需要先创建一个父组件,来渲染整个树形图。
<template>
<div class="tree-view">
<ul>
<tree-node :item="root"></tree-node>
</ul>
</div>
</template>
<script>
import TreeNode from './TreeNode'
export default {
name: 'TreeView',
components: {
TreeNode
},
data() {
return {
root: {
name: 'Root',
children: [
{
name: 'Child1',
children: [
{ name: 'Grandchild1' },
{ name: 'Grandchild2' }
]
},
{
name: 'Child2',
children: [
{ name: 'Grandchild3' },
{ name: 'Grandchild4' }
]
}
]
}
}
}
}
</script>
2. 子组件
接下来,我们需要创建一个子组件,来实现递归式的渲染。
<template>
<li>
{{ item.name }}
<template v-if="item.children && item.children.length">
<ul>
<tree-node v-for="child in item.children" :key="child.name" :item="child"></tree-node>
</ul>
</template>
</li>
</template>
<script>
export default {
name: 'TreeNode',
props: {
item: {
type: Object
}
}
}
</script>
这里我们来简单解释下子组件的递归渲染方式。
首先,我们通过v-if判断当前节点是否有子节点,如果有,则通过v-for循环渲染子节点。
接着,我们通过递归调用tree-node组件来渲染子节点,这样就能轻松实现递归效果。
在上面的例子中,我们通过定义一个root对象来表示整个树形图的根节点,然后通过递归调用tree-node组件来渲染整个树形图。
四、总结
以上就是vue左侧菜单、树形图递归实现的完整攻略。通过以上两个实例,我们可以看出递归是一个非常强大的功能,可以在很多场景下起到重要作用,同时也能提高代码效率,简化代码结构。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue左侧菜单,树形图递归实现代码 - Python技术站