提出问题
实现下图效果：
使用 Vue 的 v-for 循环，是 无法 简单 实现上图效果的，尤其还有子公司时，有 四层 以上层级时，普通的循环更加难以实现
解决
就像使用递归那样，递归使用 Vue 组件
介绍
Vue 允许 递归的调用组件，即在一个组件内部不断的嵌套调用自身
实现
思路
- 实现一级循环
v-for - 判断如果有多级，在
v-for中调用自身
引入js
<script src="js/vue.js"></script>
定义递归组件
递归组件与普通组件几乎一样，但是在组件内部，判断如果有多级，再调用自身
// 定义递归组件
const node = {
template:`
<div d='test' style="margin-left:20px;">
<div v-for='(item,index) in data' :key="index">
{{item.name}}
<node :data="item.children" v-if="item.type == 'parent'"></node>
</div>
</div>
`,
data:function(){
return {
}
},
props:['data'],
}
注册递归组件
// 组成递归组件，注意：递归组件的名字，必须与调用自身的名字一致
Vue.component('node',node)
注意：注册递归组件的 名字，必须与 调用自身 的名字一致
html代码
使用递归组件，并传值
<div id="app">
<node :data="tree" ></node>
</div>
创建vue对象
创建 vue对象，并定义数据
var vm = new Vue({
el:'#app',
data:{
tree:[
{
type:'node',
name:'董事长'
},{
type:'node',
name:'总经理'
},{
type:'parent',
name:'开发部',
children:[
{
type:'node',
name:'部门经理'
},{
type:'node',
name:'韩梅梅'
},
]
},{
type:'parent',
name:'子公司',
children:[
{
type:'node',
name:'子公司经理'
},{
type:'parent',
name:'测试部',
children:[
{
type:'node',
name:'测试部经理'
},{
type:'node',
name:'lucy'
},
]
}
]
}
]
}
});
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<node :data="tree" ></node>
</div>
<script>
// 定义递归组件
const node = {
template:`
<div d='test' style="margin-left:20px;">
<div v-for='(item,index) in data' :key="index">
{{item.name}}
<node :data="item.children" v-if="item.type == 'parent'"></node>
</div>
</div>
`,
data:function(){
return {
}
},
props:['data'],
}
// 组成递归组件，注意：递归组件的名字，必须与调用自身的名字一致
Vue.component('node',node)
var vm = new Vue({
el:'#app',
data:{
tree:[
{
type:'node',
name:'董事长'
},{
type:'node',
name:'总经理'
},{
type:'parent',
name:'开发部',
children:[
{
type:'node',
name:'部门经理'
},{
type:'node',
name:'韩梅梅'
},
]
},{
type:'parent',
name:'子公司',
children:[
{
type:'node',
name:'子公司经理'
},{
type:'parent',
name:'测试部',
children:[
{
type:'node',
name:'测试部经理'
},{
type:'node',
name:'lucy'
},
]
}
]
}
]
}
});
</script>
</body>
</html>
参考：
https://blog.csdn.net/weixin_53291256/article/details/123978444
https://www.cnblogs.com/jaycethanks/p/15336166.html