antd+vue实现递归（实例）

实现的效果：

代码：
父页面

<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;

注意三点：

1. 在父页面中，调用递归组件需要满足条件，（本例中为item.children存在）。调用组件需要写在循环里，调用的时候把children传过去，名字需要一致，不要自己乱起名
2. 在递归组件里，接收父页面传过来的children，循环展示，在循环里判断children里的children是否存在，如果条件满足，调用递归组件，把值传进去。一直循环，直到没有children，即不满足条件
3. 循环不要写在根标签上，要用一层标签包起来。

都是踩过的坑，记录一下。