最近公司需要动态生成侧边栏，所以就对这个东西进行了研究，发现可以使用递归组件来实现。UI 框架使用
element-ui；
注意
递归的基本概念就没必要提了，注意要有中断的临界点。
前期准备
动态的生成侧边栏，需要约定一个数据格式，可以用来循环或者递归操作。现成的 Vue 的 VNode 就非常适合，所以我们可以模拟一个简化版的（好像和VNode差得有点远...）。
export default [
{
self: { index: "index", icon: "el-icon-odometer", title: "首页" },
child: []
},
{
self: {
index: "userlist",
icon: "el-icon-s-tools",
title: "用户权限"
},
child: [
{ self: { index: "user", icon: "", title: "用户管理" }, child: [] },
{
self: {
index: "usergroup",
icon: "",
title: "用户组管理"
},
child: []
},
{ self: { index: "role", icon: "", title: "角色管理" }, child: [] }
]
},
{
self: {
index: "pppp",
icon: "el-icon-s-management",
title: "票务管理"
},
child: [
{ self: { index: "", icon: "", title: "规则管理" }, child: [] },
{ self: { index: "", icon: "", title: "票种管理" }, child: [] }
]
},
{
self: {
index: "/user",
icon: "el-icon-s-ticket",
title: "售票管理"
},
child: [
{ self: { index: "", icon: "", title: "售票" }, child: [] },
{ self: { index: "", icon: "", title: "取票" }, child: [] },
{ self: { index: "", icon: "", title: "长期卡" }, child: [] },
{ self: { index: "", icon: "", title: "退票" }, child: [] }
]
},
]
了解Vue递归组件
传送门 在此，写的太过于简洁，对 Vue 组件了解不是太深入的估计不是太懂，我们先来一个Demo。
DEMO
简化版数据格式
list: [
{
name: "1",
child: [
{ name: "1-1", child: [] },
{ name: "1-2", child: [] },
{
name: "1-3",
child: [
{
name: "1-3-1",
child: [
{
name: "1-3-1-1"
}
]
},
{ name: "1-3-2", child: [] },
{ name: "1-3-3", child: [] }
]
}
]
},
{
name: "2",
child: [
{
name: "2-1",
child: []
}
]
}
]
childComponents
<template>
<ul>
<li class="padding" v-for="item in child" :key="item.id">
<span>{{ item.name }}</span>
<child v-if="item.child && item.child.length > 0" :child="item.child" />
</li>
</ul>
</template>
<script>
export default {
name: "Child",
props: {
child: {
type: Array,
required: true
}
}
};
</script>
<style lang="less" scoped>
.padding {
padding-left: 20px;
}
</style>
引用
<template>
<div class="list">
<child :child="list"></child>
</div>
</template>
结果
渲染结果
注意
必须要给 component 定义 name，不然不能识别内部调用自身。
参考博客
https://blog.csdn.net/kcorih/article/details/100045888
开始自己的组件
我们首先可以参考下element-ui的相关组件文档：
https://element.eleme.cn/#/en-US/component/menu
代码如下
<template>
<div>
<template v-for="item in list">
<template v-if="item.child && item.child.length > 0">
<el-submenu :index="item.self.index" :key="item.id">
<template slot="title">
<i :class="item.self.icon"></i>
<span>{{ item.self.title }}</span>
</template>
<AsideChild :list="item.child" />
</el-submenu>
</template>
<template v-if="item.child.length == 0">
<el-menu-item :key="item.id" :index="item.self.index">
<i :class="item.self.icon"></i>
<span slot="title">{{ item.self.title }}</span>
</el-menu-item>
</template>
</template>
</div>
</template>
<script>
import { Submenu, MenuItem } from "element-ui";
export default {
name: "AsideChild",
components: {
elSubmenu: Submenu,
elMenuItem: MenuItem
},
props: {
list: {
type: Array,
require: true
}
}
};
</script>
比较不舒服的是（ESlint校验太严格了吧）， .vue 文件的 template 下必须有是一个根标签。所以多了一个div标签，每有一个child数组就会渲染一次这个组件。
把它放入 Menu 中
<el-menu
:default-active="this.$route.path"
:background-color="listConfig.backgroundColor"
:text-color="listConfig.textColor"
:active-text-color="listConfig.activeTextColor"
:unique-opened="listConfig.uniqueOpened"
:router="listConfig.router"
:collapse.sync="hidden"
>
<AsideChild :list="list" />
</el-menu>
效果
效果图
不足之处
- 没有对标签进行分组（主要是我们没有需求...）；
- 多了一个
div标签； - 可能存在性能问题（需要验证）；
以上仅为个人愚见，有错误或者不足的恳请联系改正。
PS：感觉没有React写着优雅，一般嵌套也就三到四层。
