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

devtools/2024/10/17 22:07:05/

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

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;},


http://www.ppmy.cn/devtools/126569.html

相关文章

Android13 添加运行时权限

在一些场景下&#xff0c;需要给app 添加运行时权限&#xff0c;这样就不需要在使用的时候再去点击授权。 直接上代码&#xff1a; --- a/services/core/java/com/android/server/pm/permission/DefaultPermissionGrantPolicy.javab/services/core/java/com/android/server/pm…

推荐一个可以免费上传PDF产品图册的网站

​在数字化时代&#xff0c;企业将产品图册以PDF格式上传至网络&#xff0c;不仅便于客户浏览和下载&#xff0c;还能提升企业的专业形象。今天&#xff0c;就为您推荐一个可以免费上传PDF产品图册的网站——FLBOOK&#xff0c;轻松实现产品图册的在线展示。 1.注册登录&#x…

jmeter输出性能测试报告(常见问题处理与处理)

问题1&#xff1a;报错 WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0x80000002. Windows R 意思是&#xff1a;报没有权限 处理&#xff1a; 操作非gui生成测试报告的方法 cmd界面进入到 jmeter的bin目录 jmeter –n –t -l -e –o …

快手游戏服务端C++开发一面-面经总结

1、tcp的重传机制有哪几种&#xff1f;具体描述一下 最基本的超时重传 超过时间就会重传 三个重复ACK 快速重传 减少等待超时、 接收方可以发送选择性确认 不用重传整段 乱序到达 可以通知哪些丢失 重复数据重传 2、override和final&#xff1f; override可写可不写 写出来就…

T10 tensorflow数据增强

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 T10 使用 TensorFlow 实现数据增强 在深度学习的图像分类任务中&#xff0c;数据增强是一种常用的技术&#xff0c;它通过对现有训练样本进行随机变换&#…

使用人体关键点驱动FBX格式虚拟人原理【详解】

文章目录 1、使用人体关键点数据驱动FBX格式虚拟人的总流程2、使用mediapipe检测人体关键点和插值平滑2.1 mediapipe检测人体关键点2.2 人体关键点的插值平滑 3、将2d关键点转为3d关键点4、旋转矩阵4.1 旋转矩阵4.2 旋转矩阵转为四元数 5、将旋转矩阵用于虚拟人的驱动5.1 基础旋…

Linux 操作系统——扫盲教程5

目录 更多的 Machine Related 指令 useradd passwd ps top nice pgrep ifconfig iostat iotop mpstat vmstat 更多的 Machine Related 指令 useradd 各位如果有自己装Linux发行版的经验&#xff0c;就会知道我们的操作系统需要注册一个用户&#xff0c;我们登陆上…

中国全国省市区县汇总全国省市区json省市区数据2024最新

简介 包含全国省市区县数据,共3465个。 全国总共有23个省、5个自治区、4个直辖市、2个特别行政区。 ——更新于2024年10月16日,从2017年开始,已经更新坚持7年 从刚开始1000个左右的城市json,到现在全国省市区县3465个。 本人感觉应该是目前最完善的~ 每年都在更新中,…