1.页面的布局 ： 注意 序号的prop="index"
<template> <div class="table"> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%"> //注意： 在序号这一列添加一个prop属性prop="index" //注意： 在序号这一列添加一个prop属性:index="indexMethods" <el-table-column prop="index" type="index" label="序号" :index="indexMethods"></el-table-column> <el-table-column prop="time" label="时间"></el-table-column> <el-table-column prop="grade" label="年级"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="subjects" label="科目"></el-table-column> <el-table-column prop="score" label="成绩"></el-table-column> </el-table> </div> </template>2.span-method是el-table上属性，其值是一个函数，objectSpanMethod方法是用来处理合并行的返回值，data数据如下:
tableData: [
{ time: "2020-08-10", grade: "三年二班", name: "小明", subjects: "语文", score: 80, },
{ time: "2020-08-10", grade: "三年二班", name: "小明", subjects: "数学", score: 80, },
],
mergeObj: {}, // 用来记录需要合并行的下标
//注意：
mergeArr增加合并列属性index
mergeArr: ["index","time", "grade", "name", "subjects", "score"], // 需要合并的表格中的列名
indexObj: {},// 用于记录索引项对应的实际序号
3.在接口返回后调用方法，如下：
this.getSpanArr(this.tableData);4.getSpanArr方法
// getSpanArr方法 getSpanArr(data) { this.mergeArr.forEach((key, index1) => { let count = 0; // 用来记录需要合并行的起始位置 this.mergeObj[key] = []; // 记录每一列的合并信息 data.forEach((item, index) => { // index == 0表示数据为第一行，直接 push 一个 1 if (index === 0) { this.mergeObj[key].push(1); } else { // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位 if (item[key] === data[index - 1][key]) { this.mergeObj[key][count] += 1; this.mergeObj[key].push(0); } else { // 如果当前行和上一行其值不相等 count = index; // 记录当前位置 this.mergeObj[key].push(1); // 重新push 一个 1 } } }); }); // 等待mergeObj处理完，序号列这一项合并情况，只需要和相邻的下一项time合并情况一致即可 this.mergeObj["index"] = this.mergeObj["time"]; // 处理合并后序号匹配不上的问题 处理indexObj let num = 0; this.mergeObj["index"].forEach((item, index) => { if (item !== 0) { num++; this.indexObj[index] = num; } }); },5. 自定义序号
// 自定义序号 indexMethods(index) { return this.indexObj[index] + this.page.siez * (this.page.current- 1); },6.数据处理好之后就可以调用objectSpanMethod方法了，如下：
// objectSpanMethod方法 // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 } objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 判断列的属性 if (this.mergeArr.indexOf(column.property) !== -1) { // 判断其值是不是为0 if (this.mergeObj[column.property][rowIndex]) { return [this.mergeObj[column.property][rowIndex], 1]; } else { // 如果为0则为需要合并的行 return [0, 0]; } } },
