Vue components call themselves to achieve recursive display

For more articles, please follow my personal blog: https://seven777777.github.io/myblog/

I believe that everyone has encountered the following type of data during the development process:

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

Usually when faced with this kind of nested data of the same type and the number of nesting levels is uncertain, we usually use recursion to process the data recursively by repeatedly calling the function itself.

The above is the premise. The following is the main scenario of my article:

There is a multi-dimensional (but not sure how many dimensions) table display. The table component of elementUI is used, which is probably as shown in the picture below. The components provided by elementUI are re-encapsulated to dynamically control the display of the table.

The multi-level header of elementUI's table component is <el-table-column>implemented through label nesting, which is probably shown in the code below. The specific number of levels of the header is not sure here, so I naturally thought of "recursion" here.

<el-table-column label="地址">
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
</el-table-column>

I have never used it before when faced with similar scenarios. I chose the God's perspective every time and developed based on the maximum level determined by the current data (save trouble). However, it is not flexible and requires secondary maintenance when the data structure changes.

So I was thinking, can I encapsulate <el-table-column>it into components, and at the same time implement component group calling and recursive display? With a general idea, I tried to understand it, but I didn't expect it to be possible. Reflection: You should always break out of your usual development ideas and make some new attempts to achieve unexpected results.

Key: Vue components can call themselves through the name of the component.

Paste my practical code below:

//tableColumn组件

<template>
    <el-table-column
        :prop="headColumn.prop"
        :align="headColumn.align || 'center'"
        :width="headColumn.width || ''"
        :label="headColumn.label"
    >
        <template v-if="headColumn.children && headColumn.children.length">
        <!--在这里调用自己-->
            <tableColumn
                v-for="(columnData,index) in headColumn.children"
                :key="index"
                :headColumn="columnData"
            ></tableColumn>
        </template>
    </el-table-column>
</template>

<script>
export default {
    name: 'tableColumn',//通过这个name进行调用
    props: {
        headColumn: {
            type: Object,
            default() {
                return {}
            }
        }
    }
}
</script>

<style lang="scss" scoped>
</style>

The following is the specific use:

<template>
    <el-table
        :data="tableData"
    >
        <tableColumn
            v-for="(columnData,index) in tableHead"
            :key="index"
            :headColumn="columnData"
        ></tableColumn>
    </el-table>
</template>

<script>
import tableColumn from './tableColumn.vue'
export default {
    components: {
        tableColumn
    },
    data() {
        return {
            tableHead: [
                { prop: 'name', label: '姓名',},
                {
                    prop: '',
                    label: '地址',
                    children: [
                        { prop: 'province', label: '省份'},
                        { prop: 'city', label: '市区'},
                        { prop: 'address', label: '地址'},
                    ]
                }
            ],
            tableData: [
                {
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
</style>

Welcome to pay attention to my personal public account [搴Fang Shimeng]