Vue组件自我调用，实现递归展示

更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

相信大家开发过程中都曾遇到过以下这种类型的数据：

dataList:[
    {
        name:'名称1',
        children:[
            {
                name:'名称1-1'
                children:[
                    {
                        name:'名称1-1-1',
                        children:[
                            //...
                        ]
                    }
                ]
            }
        ]
    }
]

通常面对这种同类型的嵌套数据，且不确定嵌套层级数量时，我们处理起来通常会使用——递归，通过函数重复自我调用的方式，对数据进行递归处理。

以上是前提，下面是我这篇文章的主要场景：

有一个多维（但不确定几维）的表格展示，使用elementUI的table组件，大概是下图这样,针对elementUI提供的组件，进行二次封装，从而达到动态控制表格的显示。

elementUI的table组件的多级表头，是通过标签嵌套实现的，大概是下面的代码所示，此处不确定表头具体的层级数量，所以这里我理所应当的想到了“递归”。

之前面对相似的场景时从未使用过，每次都选择了上帝视角，根据确定当前数据确定的最大层级进行开发（省事），但是不灵活，当数据结构变化时，还需要二次维护。

于是这就在想，能不能把封装成组件，同时再实现组件组我调用，递归展示呢？有了大概的思路，就尝试去了解了一下，没想到还真可以。反思：还是要经常跳出自己的惯性开发思路，做一些新的尝试，会有以外的收货。

关键：Vue组件可以通过组件的name，实现对自己的调用。

下面贴上我的实践代码：

//tableColumn组件

下面是具体使用时：

欢迎关注的我的个人公众号【搴芳拾梦】