The third level header of elementui does not cycle sequentially when it is cycled. - Codes Helper

elementui multi-level header loops do not cycle in order
the header order given by the background api is BCD, and then the second layer header is cycled sequentially, but the third layer header, when cycling, does not cycle in order

tableHeader components:

    <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            style="width: 100%;height: 600px" border>
        <el-table-column v-for="header in tableHeaderChildData" show-overflow-tooltip :key="header.id"
                         :label="header.label" :prop="header.prop" align="center">
            <el-table-column v-for="i in header.children" :key="i.id" show-overflow-tooltip :label="i.label"
                             :prop="i.prop" align="center">
                <TableColumn v-bind:tableHeaderChildData="i.children"></TableColumn>
            </el-table-column>
        </el-table-column>
    </el-table>

TableColumn component:

            <el-table-column v-for="header in tableHeaderChildData" show-overflow-tooltip :key="header.id"
                     :label="header.label" :prop="header.prop" align="center">
        <el-table-column v-for="i in header.children" :key="i.id" show-overflow-tooltip :label="i.label"
                         :prop="i.prop" align="center">
            <table-header v-bind:tableHeaderChildData="i.children"></table-header>
        </el-table-column>
    </el-table-column>

I find that if I write three loops in a component, it can be sorted correctly

        <el-table-column v-for="header in tableHeaderChildData" show-overflow-tooltip :key="header.id"
                         :label="header.label" :prop="header.prop" align="center">
            <el-table-column v-for="i in header.children" :key="i.id" show-overflow-tooltip :label="i.label"
                             :prop="i.prop" align="center">

                <el-table-column v-for="y in i.children" :key="y.id" show-overflow-tooltip :label="y.label"
                                 :prop="y.prop" align="center">
                    <!--<TableColumn v-bind:tableHeaderChildData="i.children"></TableColumn>-->
                </el-table-column>
            </el-table-column>
        </el-table-column>

but because the level of the header cannot be determined at present, it cannot be written dead

yet.