elementui+vue 多行数据的合并单元格

多行的合并,可以参考,改改就能用

html

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>

数据

javascript 复制代码
 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代码,处理数据,合并单元格

javascript 复制代码
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;
    },
相关推荐
德育处主任11 小时前
p5.js 绘制 3D 椭球体 ellipsoid
前端·javascript·数据可视化
未来之窗软件服务11 小时前
未来之窗昭和仙君 (四) 前端网页分页 — 东方仙盟筑基期
前端·仙盟创梦ide·东方仙盟·东方仙盟修仙·昭和仙君
安卓开发者11 小时前
鸿蒙Next Web组件详解:属性设置与事件处理实战
前端·华为·harmonyos
安卓开发者11 小时前
鸿蒙NEXT Web组件与JavaScript交互:打通原生与前端的桥梁
前端·javascript·harmonyos
Sapphire~12 小时前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css
小菜花2912 小时前
利用H5实现svg图片中各部分监听事件
前端·javascript·svg·object标签
二十雨辰13 小时前
歌词滚动效果
前端·css
法医13 小时前
和文心快码做朋友,让编程像“说话”一样简单
前端·文心快码
前端小巷子13 小时前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试
陈随易13 小时前
适合中国宝宝的AI编程神器,文心快码
前端·后端·node.js