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

效果

数据源

前端代码 (展示以及表格处理/数据处理)

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

JS代码

data
 dataList: [],
 headers: [],
 spanArr: [],

methods
 getSpanArr(data) {
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.spanArr.push(1);
                    this.pos = 0
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i][0] === data[i - 1][0]) {
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.pos = i;
                    }
                }
            }
        },

// 合并单元格
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1 ) {
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }

        }
相关推荐
excel2 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着2 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友3 小时前
什么是API签名?
前端·后端·安全
会豪5 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子6 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶6 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子6 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_6 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23336 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin6 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js