vue竖向表格 - 利用element实现解决纵向循环仿表格布局

实现效果图

需求是完成纵向显示数据，支持表格分组、表头数据均可动态渲染

<template>
    <div class="box">
        <div class="tableHead">
            <template v-for="(i,j) in tableHead">
                <el-row :key="j">
                    <el-col :span="i.children ? 12 : 24" :style="i.children ? extent(i.children) : 'height:50px'">{{i.name}}</el-col>
                    <el-col v-if="i.children" :span="12">
                        <template v-for="(g,k) in i.children">
                            <el-row :key="k">{{g.name}}</el-row>
                        </template>
                    </el-col>
                </el-row>
            </template>
        </div>
        <div class="tableBody">
            <template v-for="(i,j) in tableBody">
                <el-row :key="j" class="singleRow">
                    <template v-for="(g,k) in i">
                        <el-col :span="24" class="column" :key="k">
                            <div style="width:160px;">{{g}}</div>
                        </el-col>
                    </template>
                </el-row>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            tableHead:[
                {name: "项目名",id:0},
                {name: "问题数",id:1},
                {name: "投标文件分析",id:2,children:[
                    {name: "相同创建人",id:2-0},
                    {name: "相同修改人",id:2-1}
                ]},
                {name: "投标行为审查",id:3,children:[
                    {name: "IP地址相同",id:3-0},
                    {name: "MAC地址相同",id:3-1},             
                    {name: "存在股权关系",id:3-2},         
                ]},
                {name: "内容异常审查",id:4,children:[
                    {name: "投标人、授权人重复",id:4-0},
                    {name: "出现其他投标人信息",id:4-1},             
                    {name: "错误、异常信息一致",id:4-2},
                    {name: "报价阶梯规律性",id:4-3},         
                ]},
                {name: "其他",id:5},
            ],
            tableBody:[
                {
                    name:'投标1',
                    issue:5,
                    theSameCreatePer:'是',
                    theSameAmendPer:'是',
                    ipTheSame:'是',
                    macTheSame:'是',
                    existMatter:'是',
                    personRep:'是',
                    elsePer:'是',
                    err:'是',
                    quote:'是',
                    theRest:'无'
                },
                {
                    name:'投标2',
                    issue:10,
                    theSameCreatePer:'否',
                    theSameAmendPer:'否',
                    ipTheSame:'否',
                    macTheSame:'否',
                    existMatter:'否',
                    personRep:'否',
                    elsePer:'否',
                    err:'否',
                    quote:'否',
                    theRest:'有'
                },
            ]
        }
    },
    methods:{
        extent(list){
            var height = 50 * list.length
            return `height: ${height}px; line-height: ${height}px;`
        }
    }
}
</script>

<style scoped>
.tableHead {
    width:300px;
    float:left;
}
.tableBody {
    display: flex;
    float:left;
}
.singleRow{
    width: 160px;
}
.el-row {
    margin: -1px -1px -1px -1px; /*解决边框重叠*/
    text-align: center;
    font-size: 14px;
    line-height:50px;
    border:1px solid #e6e6e6;
}
.column {
    border:1px solid #e6e6e6;
    height:51px;
    border-top: none;
    border-left:none;
}
</style>