多行的合并,可以参考,改改就能用
html
<template><el-table :data="students" :span-method="objectSpanMethod"><el-table-column prop="grade" label="年级"></el-table-column><el-table-column prop="class" label="班级"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="score" label="分数"></el-table-column></el-table>
</template>
数据
students:
[{ grade: '一年级', class: '一班', name: '张三', score: 85 },{ grade: '一年级', class: '一班', name: '张三', score: 90 },{ grade: '一年级', class: '一班', name: '李四', score: 78 },{ grade: '一年级', class: '一班', name: '李四', score: 82 },{ grade: '一年级', class: '二班', name: '王五', score: 92 },{ grade: '一年级', class: '二班', name: '王五', score: 88 },{ grade: '一年级', class: '二班', name: '王五', score: 95 },{ grade: '二年级', class: '一班', name: '赵六', score: 80 },{ grade: '二年级', class: '一班', name: '赵六', score: 85 },{ grade: '二年级', class: '一班', name: '孙七', score: 76 },{ grade: '二年级', class: '一班', name: '孙七', score: 81 },{ grade: '三年级', class: '一班', name: '周八', score: 83 },{ grade: '三年级', class: '一班', name: '周八', score: 87 }]
js代码,处理数据,合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) { // 年级列if (rowIndex === 0 || this.students[rowIndex - 1].grade !== row.grade) {return {rowspan: this.getRowspanByGrade(row.grade),colspan: 1};} else {return {rowspan: 0,colspan: 0};}} else if (columnIndex === 1) { // 班级列if (rowIndex === 0 || this.students[rowIndex - 1].grade !== row.grade || this.students[rowIndex - 1].class !== row.class) {return {rowspan: this.getRowspanByClass(row.class, row.grade),colspan: 1};} else {return {rowspan: 0,colspan: 0};}} else if (columnIndex === 2) { // 姓名列if (rowIndex === 0 || this.students[rowIndex - 1].grade !== row.grade || this.students[rowIndex - 1].class !== row.class || this.students[rowIndex - 1].name !== row.name) {return {rowspan: this.getRowspanByName(row.name, row.grade, row.class),colspan: 1};} else {return {rowspan: 0,colspan: 0};}}},// 获取对应的数组长度getRowspanByGrade(grade) {return this.students.filter(student => student.grade === grade).length;},getRowspanByClass(classname, grade) {return this.students.filter(student => student.class === classname && student.grade === grade).length;},getRowspanByName(name, grade, classname) {return this.students.filter(student => student.name === name && student.grade === grade && student.class === classname).length;},