el-table动态生成多级表头的表格（js + ts）

展示形式：
在这里插入图片描述
详细代码：
（js）

<template><div><el-table :data="tableData" style="width: 100%"><el-table-column label="题目信息" align="center"><el-table-column prop="questionName" label="题目名称"></el-table-column><el-table-column prop="fullScore" label="满分"></el-table-column><el-table-column prop="gradeAvg" label="年级均分"></el-table-column><el-table-column prop="gradeScoreRate" label="年级分数线"></el-table-column></el-table-column><el-table-column v-for="classInfo in classHeaders" :key="classInfo.classScoreId"><template #header>{{ classInfo.className }}</template><el-table-column label="班级均分" align="center"><template #default="{ row }">{{ getCellValue(row, classInfo, 'classAvg') }}</template></el-table-column><el-table-column label="班级分数线" align="center"><template #default="{ row }">{{ getCellValue(row, classInfo, 'classScoreRate') }}</template></el-table-column></el-table-column></el-table></div></template><script>import { reactive } from 'vue';export default {data() {return {tableData: reactive([{id: 1,questionId: 1,questionName: '填空题',fullScore: 10,gradeAvg: 8,gradeScoreRate: 0.8,questionClassVOList: [{classScoreId: 1,className: '一班',classAvg: 7,classScoreRate: 0.7}, {classScoreId: 2,className: '二班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 3,className: '三班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 4,className: '四班',classAvg: 8,classScoreRate: 0.8}]}, {id: 2,questionId: 2,questionName: '选择题',fullScore: 10,gradeAvg: 8,gradeScoreRate: 0.8,questionClassVOList: [{classScoreId: 1,className: '一班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 2,className: '二班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 3,className: '三班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 4,className: '四班',classAvg: 8,classScoreRate: 0.8}]}, {id: 3,questionId: 3,questionName: '判断题',fullScore: 10,gradeAvg: 8,gradeScoreRate: 0.8,questionClassVOList: [{classScoreId: 1,className: '一班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 2,className: '二班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 3,className: '三班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 4,className: '四班',classAvg: 8,classScoreRate: 0.8}]}, {id: 4,questionId: 4,questionName: '填空题',fullScore: 10,gradeAvg: 8,gradeScoreRate: 0.8,questionClassVOList: [{classScoreId: 1,className: '一班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 2,className: '二班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 3,className: '三班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 4,className: '四班',classAvg: 8,classScoreRate: 0.8}]}, {id: 5,questionId: 5,questionName: '简答题',fullScore: 10,gradeAvg: 8,gradeScoreRate: 0.8,questionClassVOList: [{classScoreId: 1,className: '一班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 2,className: '二班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 3,className: '三班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 4,className: '四班',classAvg: 8,classScoreRate: 0.8}]}
])  // 你的数据结构};},computed: {classHeaders() {// 假设每个问题类型下的班级信息结构是一样的，取第一个问题类型下的班级信息来生成表头const firstQuestion = this.tableData[0];if (firstQuestion) {return firstQuestion.questionClassVOList;}return [];}},methods: {getCellValue(row, classInfo, prop) {const classData = row.questionClassVOList.find(item => item.classScoreId === classInfo.classScoreId);return classData ? classData[prop] : '';}}};</script><style>/* 样式可以根据你的需求进行调整 */</style>

（ts）

<template><div><el-table :data="tableData" style="width: 100%"><el-table-column label="题目信息" align="center"><el-table-column prop="questionName" label="题目名称"></el-table-column><el-table-column prop="fullScore" label="满分"></el-table-column><el-table-column prop="gradeAvg" label="年级均分"></el-table-column><el-table-column prop="gradeScoreRate" label="年级分数线"></el-table-column></el-table-column><el-table-column v-for="classInfo in classHeaders" :key="classInfo.classScoreId"><template #header>{{ classInfo.className }}</template><el-table-column label="班级均分" align="center"><template #default="{ row }">{{ getCellValue(row, classInfo, 'classAvg') }}</template></el-table-column><el-table-column label="班级分数线" align="center"><template #default="{ row }">{{ getCellValue(row, classInfo, 'classScoreRate') }}</template></el-table-column></el-table-column></el-table></div>
</template><script setup lang="ts">
import { ref, reactive, computed } from 'vue';interface ClassInfo {classScoreId: number;className: string;classAvg: number;classScoreRate: number;
}interface QuestionClass {questionClassVOList: ClassInfo[];
}interface TableRow extends QuestionClass {questionId: number;questionName: string;fullScore: number;gradeAvg: number;gradeScoreRate: number;
}const tableData = reactive<TableRow[]>([{questionId: 1,questionName: '填空题',fullScore: 10,gradeAvg: 8,gradeScoreRate: 0.8,questionClassVOList: [{classScoreId: 1,className: '一班',classAvg: 7,classScoreRate: 0.7}, {classScoreId: 2,className: '二班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 3,className: '三班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 4,className: '四班',classAvg: 8,classScoreRate: 0.8}]}, {questionId: 2,questionName: '选择题',fullScore: 10,gradeAvg: 8,gradeScoreRate: 0.8,questionClassVOList: [{classScoreId: 1,className: '一班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 2,className: '二班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 3,className: '三班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 4,className: '四班',classAvg: 8,classScoreRate: 0.8}]}, {questionId: 3,questionName: '判断题',fullScore: 10,gradeAvg: 8,gradeScoreRate: 0.8,questionClassVOList: [{classScoreId: 1,className: '一班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 2,className: '二班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 3,className: '三班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 4,className: '四班',classAvg: 8,classScoreRate: 0.8}]}, {questionId: 4,questionName: '填空题',fullScore: 10,gradeAvg: 8,gradeScoreRate: 0.8,questionClassVOList: [{classScoreId: 1,className: '一班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 2,className: '二班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 3,className: '三班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 4,className: '四班',classAvg: 8,classScoreRate: 0.8}]}, {questionId: 5,questionName: '简答题',fullScore: 10,gradeAvg: 8,gradeScoreRate: 0.8,questionClassVOList: [{classScoreId: 1,className: '一班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 2,className: '二班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 3,className: '三班',classAvg: 8,classScoreRate: 0.8}, {classScoreId: 4,className: '四班',classAvg: 8,classScoreRate: 0.8}]}
])const classHeaders = computed<ClassInfo[]>(() => {const firstQuestion = tableData[0];if (firstQuestion) {return firstQuestion.questionClassVOList;}return [];
});const getCellValue = (row: TableRow, classInfo: ClassInfo, prop: keyof ClassInfo) => {const classData = row.questionClassVOList.find(item => item.classScoreId === classInfo.classScoreId);return classData ? classData[prop] : '';
};
</script><style lang="scss" scoped>
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/99247.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

⽹络与HTTP 笔试题精讲1

⽹络与HTTP 笔试题精讲1

OSI七层与TCP/IP 这个就是OSI参考模型，⽽实际我们现在的互联⽹世界是就是这个理论模型的落地叫做TCP/IP协议 TCP的三次握⼿与四次挥⼿ 客户端想要发送数据给服务端，在发送实际的数据之前，需要先在两端之间建⽴连接，数据发完以后也需要将该连接关闭。建⽴连接的过程就是我们…
阅读更多...
Java中网络的基本介绍。网络通信，网络，ip地址，域名，端口，网络通信协议，TCP/IP传输过程，网络通信协议模型，TCP协议，UDP协议

Java中网络的基本介绍。网络通信，网络，ip地址，域名，端口，网络通信协议，TCP/IP传输过程，网络通信协议模型，TCP协议，UDP协议

- 网络通信 概念&#xff1a;网络通信是指通过计算机网络进行信息传输的过程&#xff0c;包括数据传输、语音通话、视频会议等。在网络通信中&#xff0c;数据被分成一系列的数据包&#xff0c;并通过网络传输到目的地。在数据传输过程中&#xff0c;需要确保数据的完整性、准…
阅读更多...
使用scp在两个linux系统之间传输文件

使用scp在两个linux系统之间传输文件

使用scp在两个linux系统之间传输文件 问题背景拷贝文件首先我们要从源设备&#xff08;本文中是矩池云自己的服务器&#xff09;传输文件至目标设备&#xff08;本文中是A100设备&#xff09;传输一个文件传输一个文件夹 从目标设备&#xff08;本文中是A100设备&#xff09;下…
阅读更多...
Redis List类型命令 - Set类型命令 - SortedSet类型命令

Redis List类型命令 - Set类型命令 - SortedSet类型命令

目录 List类型 什么是双向链表呢&#xff1f; List类型的特征&#xff1a; List的常用命令 LPUSH和RPUSH的区别&#xff1a; LPOP和RPOP的区别&#xff1a; LPUSH和RPUSH的使用 LPOP和RPOP的使用 LRANGE key star end&#xff1a;返回一段距离范围内所有的元素 BLPOP…
阅读更多...
【实践篇】Redis缓存和数据库一致性问题

【实践篇】Redis缓存和数据库一致性问题

Redis缓存和数据库一致性问题 文章目录 Redis缓存和数据库一致性问题0. 前言参考资料 1. 缓存和数据库的数据不一致是如何发生的&#xff1f;1. 删除数据的情况&#xff1a;2. 修改数据的情况&#xff1a; 0. 前言 确保缓存和数据库之间的数据一致性是一项挑战&#xff0c;这需…
阅读更多...
2023年05月 C/C++（五级）真题解析#中国电子学会#全国青少年软件编程等级考试

2023年05月 C/C++（五级）真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程（1~8级）全部真题・点这里 第1题：问题求解 给定一个正整数N，求最小的M满足比N大且M与N的二进制表示中有相同数目的1。 举个例子，假如给定N为78，二进制表示为1001110，包含4个1，那么最小的比N大的并且二进制表示中只包含4个1的数是83，其二进制是1010011，因此83…
阅读更多...
长短期记忆网络（LSTM）

长短期记忆网络（LSTM）

概念 三个门&#xff1a;遗忘门、输入门、输出门 候选记忆单元 记忆单元 隐状态 ot 控制是否让输出&#xff0c;是否要进行重置。 总结 代码实现 import torch from torch import nn from d2l import torch as d2lbatch_size,num_steps 32,35 train_iter,vocab d2l.load_…
阅读更多...
【python爬虫】3.爬虫初体验（BeautifulSoup解析）

【python爬虫】3.爬虫初体验（BeautifulSoup解析）

文章目录 前言BeautifulSoup是什么BeautifulSoup怎么用解析数据提取数据 对象的变化过程总结 前言 上一关&#xff0c;我们学习了HTML基础知识&#xff0c;知道了HTML是一种用来描述网页的语言&#xff0c;又了解了HTML的基本结构。 认识了HTML中的常见标签和常见属性&#x…
阅读更多...
Java学习笔记31——字符流

Java学习笔记31——字符流

字符流 字符流为什么出现字符流编码表字符串中的编码解码问题字符流写数据的5中方式字符流读数据的两种方式字符流复制Java文件 字符流 为什么出现字符流 汉字的存储如果是GBK编码占用2个字节&#xff0c;如果是UTF-8占用三个字节 用字节流复制文本文件时&#xff0c;文本文…
阅读更多...
关于linux openssl的自签证书认证与nginx配置

关于linux openssl的自签证书认证与nginx配置

自签文档链接 重点注意这块&#xff0c;不能写一样的&#xff0c;要是一样的话登录界面锁会报不安全 域名这块跟最后发布的一致 nginx配置的话 server {listen 443 ssl; //ssl 说明为https 默认端口为443server_name www.skyys.com; //跟openssl设置的域名保持一致s…
阅读更多...
C# void 关键字学习

C# void 关键字学习

C#中void关键字是System.Void的别名&#xff1b; 可以将 void 用作方法&#xff08;或本地函数&#xff09;的返回类型来指定该方法不返回值&#xff1b; 如果C&#xff03;方法中没有参数&#xff0c;则不能将void用作参数&#xff1b;这是与C语言不同的&#xff0c;C语言有…
阅读更多...
Android之 Canvas绘制

Android之 Canvas绘制

一 Canvas介绍 1.1 Canvas 是绘制图形的重要类之一&#xff0c;它可以在 View 或 SurfaceView 上绘制各种图形和文本. 1.2 要创建 Canvas&#xff0c;首先需要有一个 View 或 SurfaceView 对象&#xff0c;在 View 或 SurfaceView 的绘制方法中&#xff0c;可以通过 Canvas 的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023