实现的效果:
代码:
父页面
<template>
<a-row :gutter="24">
<a-col :md="24">
<a-card title="递归实验">
<a-steps :current="current">
<a-step v-for="(item, index) in dataSteps" :key="index" :title="item.name">
<template slot="description">
<div v-if="item.children">
<RecursionCom :children="item.children"></RecursionCom>
</div>
</template>
</a-step>
</a-steps>
</a-card>
</a-col>
</a-row>
</template>
<script>
import RecursionCom from '@/components/RecursionCom'
export default {
name: 'Recursion',
components: { RecursionCom },
data () {
return {
current: 1,
dataSteps: [
{
id: 'as',
name: 'Amy',
age: 12,
children: [
{
id: 'aqs',
name: 'Amy1',
age: 11
},
{
id: 'aqsq',
name: 'Amy2',
age: 10,
children: [
{
id: 'aqs1',
name: 'Amy22',
age: 17
},
{
id: 'aqs2',
name: 'Amy23',
age: 10
}
]
},
{
id: 'sq',
name: 'Amy3',
age: 13
}
]
},
{
id: 'bs',
name: 'Bill',
age: 18,
children: [
{
id: 'bs1',
name: 'Bill1',
age: 17
},
{
id: 'bs2',
name: 'Bill2',
age: 10
}
]
},
{
id: 'cs',
name: 'Claire',
age: 34,
children: [
{
id: 'cs1',
name: 'Claire1',
age: 14
},
{
id: 'cs2',
name: 'Claire2',
age: 45,
children: [
{
id: 'cs22',
name: 'Claire22',
age: 14
},
{
id: 'cs23',
name: 'Claire23',
age: 14,
children: [
{
id: 'cs233',
name: 'Claire233',
age: 19
},
{
id: 'cs234',
name: 'Claire234',
age: 10
}
]
}
]
}
]
},
{
id: 'a5s',
name: 'Damon',
age: 12,
children: [
{
id: 'dd3',
name: 'Damon1',
age: 11
},
{
id: 'e4',
name: 'Damon2',
age: 10,
children: [
{
id: '3e',
name: 'Damon22',
age: 17
},
{
id: 'r4',
name: 'Damon23',
age: 10
}
]
},
{
id: 't5',
name: 'Damon3',
age: 13
}
]
}
]
}
},
methods: {}
}
</script>
<style>
</style>
递归组件:
<template>
<ul>
<li v-for="(item, index) in children" :key="index">
{{ item.name }}
<div v-if="item.children">
<RecursionCom :children="item.children"></RecursionCom>
</div>
</li>
</ul>
</template>
<script>
export default {
name: 'RecursionCom',
props: {
children: {
type: Array,
default: () => {
return []
}
}
}
}
</script>
import RecursionCom from './RecursionCom';
export default RecursionCom;
注意三点:
- 在父页面中,调用递归组件需要满足条件,(本例中为item.children存在)。调用组件需要写在循环里,调用的时候把children传过去,名字需要一致,不要自己乱起名
- 在递归组件里,接收父页面传过来的children,循环展示,在循环里判断children里的children是否存在,如果条件满足,调用递归组件,把值传进去。一直循环,直到没有children,即不满足条件
- 循环不要写在根标签上,要用一层标签包起来。
都是踩过的坑,记录一下。
版权声明:本文为qq_43437571原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。