【table】复杂表格示例，多行表头，包含横表头+纵表头

效果：

代码：

<template>
    <div class="shunyin-table">
        <table>
            <tr>
                <th width="5%" rowspan="2"></th>
                <th width="5%" rowspan="2">品目</th>
                <th width="5%" colspan="3">工程间</th>
                <th width="5%" colspan="7">顺引</th>
                <th width="5%" colspan="9">顺建</th>
            </tr>
            <tr>
                <th  v-for="(e,index) of titleList" width="5%">{{ e }}</th>
            </tr>
            <tr>
                <th width="5%" rowspan="4">部品信息</th>
                <th width="5%">线侧</th>
                <td  v-for="(e,index) of dataList" width="5%">{{ e ? e.podLineNum: '' }}</td>
            </tr>
            <tr>
                <th width="5%">在途(满)</th>
                <td  v-for="(e,index) of dataList" width="5%">{{ e ? e.podOnWayFull : '' }}</td>
            </tr>
            <tr>
                <th width="5%">在途(空)</th>
                <td  v-for="(e,index) of dataList" width="5%">{{ e ? e.podOnWayEmpty : ''}}</td>
            </tr>
            <tr>
                <th width="5%">置场</th>
                <td  v-for="(e,index) of dataList" width="5%">{{ e ? e.podInArea : ''}}</td>
            </tr>
            <tr>
                <th width="5%" rowspan="4">机器人信息</th>
                <th width="5%">投入台数</th>
                <td  v-for="(e,index) of dataList" width="5%">{{ e ? e.robotTotal : ''}}</td>
            </tr>
            <tr>
                <th width="5%">运行台数</th>
                <td  v-for="(e,index) of dataList" width="5%">{{ e ? e.robotRun : ''}}</td>
            </tr>
            <tr>
                <th width="5%">异常台数</th>
                <td  v-for="(e,index) of dataList" width="5%">{{ e ? e.robotException : ''}}</td>
            </tr>
            <tr>
                <th width="5%">可动率</th>
                <td  v-for="(e,index) of dataList" width="5%">{{ e ? e.robotRate : '' }}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        props: {
            context: Object,
            data: {
                default: ''
            }
        },
        data() {
            return {
                message: '',
                dataList: new Array(18),
                title: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18],
                titleList: ['保险杠','侧围杠','仪表板上板','右门板','左门板','油箱','地毯','HEV地毯','前排气','后排气','大灯','面板','空滤','中部通道','方向盘','水箱下横梁','导向头','发动机变速器'],
                test:[],
            }
        },
        mounted() {
            if(this.data && this.data.sysjRuntime){
                this.handleData(this.data.sysjRuntime)
            }
            // this.handleData(this.test)
        },
        methods: {
            handleData(sysjRuntime){
                let guideList = []
                let buildList = []
                let engineeringList = []
                this.dataList = new Array(18)
                sysjRuntime.forEach(item => {
                    if(item.text == '顺引'){
                        guideList = item.content
                    }else if(item.text == '顺建'){
                        buildList = item.content
                    }else if(item.text == '工程间'){
                        engineeringList = item.content
                    }
                })
                for(let i = 1; i <= 3; i++){
                    for(let j = 0; j < guideList.length; j++){
                        if(guideList[j].categoryName == i){
                            this.dataList[i-1] = guideList[j]
                            break
                        }
                    }
                }
                for(let i = 4; i <= 10; i++){
                    for(let j = 0; j < buildList.length; j++){
                        if(buildList[j].categoryName == i){
                            this.dataList[i-1] = buildList[j]
                            break
                        }
                    }
                }
                for(let i = 11; i <= 18; i++){
                    for(let j = 0; j < engineeringList.length; j++){
                        if(engineeringList[j].categoryName == i){
                            this.dataList[i-1] = engineeringList[j]
                            break
                        }
                    }
                }
                console.log(this.dataList)
            }
        }
    }
</script>

<style>
    .shunyin-table{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .shunyin-table table
    {
        border-collapse: collapse;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        height: 100%;
    }
    .shunyin-table table th
    {
        background-color: #E9EBF0;
        border: 1px solid #D6DAE0;
        color: #666;
        height: 8%;
    }
    .shunyin-table table td
    {
        border: 1px solid #D6DAE0;
        color: #666;
    }

</style>