elementUI非常规数据格式渲染复杂表格(副表头、合并单元格)

效果

数据源

前端代码 (表格处理  顶部左侧固定)

标签
<el-table :data="dataList" style="width: 100%" :span-method="objectSpanMethod" height="78.5vh">
                <template v-for="(item, index) in headers">
                    <el-table-column prop="" :label="item" align="center" min-width="110" v-if="index < 3" fixed>
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row[index] }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="" :label="item" v-else align="center">
                        <el-table-column prop="" label="姓名" align="center">
                            <template slot-scope="scope">
                                {{ scope.row[index + index - 3] }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="手机号" align="center" min-width="110">
                            <template slot-scope="scope">
                                {{ scope.row[index + index - 2] }}
                            </template>
                        </el-table-column>
                    </el-table-column>
                </template>
            </el-table>

JS代码

data
 dataList: [],
 headers: [],

methods


// 合并单元格  element ui 官网
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1) {
                if (rowIndex % 2 === 0) {
                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        }