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.mzph.cn/news/59206.shtml

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

相关文章

【C++】C++11的新特性（上）

【C++】C++11的新特性（上）

引入 C11作为C标准的一个重要版本&#xff0c;引入了许多令人振奋的新特性&#xff0c;极大地丰富了这门编程语言的功能和表达能力。本章将为您介绍C11的一些主要变化和改进&#xff0c;为接下来的章节铺垫。 文章目录 引入 一、列表初始化 1、1 {} 初始化 1、2 std::initiali…
阅读更多...
java 桥接模式

java 桥接模式

桥接模式 桥接模式简介桥接模式的实现总结 桥接模式简介 桥接模式&#xff08;Bridge&#xff09;是将抽象部分与它的实现部分分离&#xff0c;使它们都可以独立地变化。它是一种对象结构型模式&#xff0c;又称为柄体(Handle and Body)模式或接口(Interfce)模式。 桥接模式基于…
阅读更多...
正则表达式 之 断言详解

正则表达式 之 断言详解

正则表达式的先行断言和后行断言一共有 4 种形式&#xff1a; (?pattern) 零宽正向先行断言(zero-width positive lookahead assertion)(?!pattern) 零宽负向先行断言(zero-width negative lookahead assertion)(?<pattern) 零宽正向后行断言(zero-width positive lookb…
阅读更多...
NEOVIM学习笔记

NEOVIM学习笔记

GitHub - blogercn/nvim-config: A pretty epic NeoVim setup 一直使用vim&#xff0c;每次到了新公司都要配置半天&#xff0c;而且常常配置失败&#xff0c;很多插件过期不好用。偶然看到别人的NEO VIM&#xff0c;就试着用了一下&#xff0c;感觉还不错。 用来开发和阅读C代…
阅读更多...
Kubernetes(K8s)基本环境部署

Kubernetes(K8s)基本环境部署

此处只做学习使用&#xff0c;配置单master环境。 一、环境准备 1、ip主机规划&#xff08;准备五台新机&#xff09;>修改各个节点的主机名 注意&#xff1a;关闭防火墙与selinux 节点主机名ip身份joshua1 kubernetes-master.openlab.cn 192.168.134.151masterjoshua2k…
阅读更多...
Python爬虫实战案例——第三例

Python爬虫实战案例——第三例

文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff01;严禁将文中内容用于任何商业与非法用途&#xff0c;由此产生的一切后果与作者无关。若有侵权&#xff0c;请联系删除。 起点中文网月票榜加密字体处理 字体加密的原理&#xff1a;就是将一种特定的…
阅读更多...
11.Oracle中rollup函数详解

11.Oracle中rollup函数详解

【基本介绍】 【格式】&#xff1a;group by rollup(字段1,字段2,字段3,...,字段n) 【说明】&#xff1a;rollup主要用于分组汇总&#xff0c;如果rollup中有n个字段&#xff0c;则会分别按【字段1】、【字段1,字段2】&#xff0c;【字段1,字段2,字段3】&#xff0c;...&#…
阅读更多...
C++编辑修改PDF

C++编辑修改PDF

PDFWriter是一个易于使用的C创建、修改PDF文档的库 1.创建一个PDF文件 #include #include “PDFWriter.h” int main() { std::cout << “Hello World!\n”; PDFWriter pdfWriter; int retpdfWriter.StartPDF(“D:\mytestwriterpdf.pdf”, ePDFVersion13); if (ret eS…
阅读更多...
C++面向对象编程(2)

C++面向对象编程(2)

目录 一. 问题引入 二. 右值引用 1. lvalue/rvalue/prvalue/xvalue 1.1 表达式与对象的概念 1.2 左值与右值 2. moving semantics 2.1 显示绑定 2.2 Move constructors 2.3 Move assignment operator 2.4 实例分析 // TODO Quiz REF 本章简单介绍下move语义的“来…
阅读更多...
day03_注释丶关键字丶标识符丶常量

day03_注释丶关键字丶标识符丶常量

​注释 注释就是使用人类的自然语言对代码的解释和说明。 代码本身和人类的自然语言相比&#xff0c;可读性肯定是要差一些&#xff0c;所以为了更快能够知道代码的含义、作用、需要注意地方&#xff0c;所有程序员都应该养成写注释的好习惯。 由于注释的内容是给程序员看的&…
阅读更多...
《HelloGitHub》第 89 期

《HelloGitHub》第 89 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 https://github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 …
阅读更多...
融合正余弦和柯西变异的麻雀搜索算法(Matlab代码实现）

融合正余弦和柯西变异的麻雀搜索算法(Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
Error running ‘Tomcat 8.5.29‘ Address localhost:1099 is already in use

Error running ‘Tomcat 8.5.29‘ Address localhost:1099 is already in use

一、Error running ‘Tomcat 8.5.29’ Address localhost:1099 is already in use 原因&#xff1a;端口1099被占用了。 二、解决 2.1 解决方法一-结束该端口1099占用 //1-查看端口占用&#xff0c;根据端口号1099&#xff0c;获取PID(进程ID) netstat -ano | findstr "…
阅读更多...
stackoverflow问题

stackoverflow问题

Stack Overflow requires external JavaScript from another domain, which is blocked or failed to load. stackoverflow引用了谷歌中被屏ajax.googleapis.com的jquery.min.js文件。“https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js” 方案1.打开网站…
阅读更多...
字节一面：你能讲一下跨域吗

字节一面：你能讲一下跨域吗

前言 最近博主在字节面试中遇到这样一个面试题&#xff0c;这个问题也是前端面试的高频问题&#xff0c;作为一名前端开发工程师&#xff0c;我们日常开发中与后端联调时一定会遇到跨域的问题&#xff0c;只有处理好了跨域才能够与后端交互完成需求&#xff0c;所以深入学习跨域…
阅读更多...
docker 04.更加重要的命令

docker 04.更加重要的命令

之前的都是基础命令&#xff0c; 前台交互进程和后台守护进程&#xff1a; 重新进入容器&#xff1a; docker中的导入导出&#xff1a; docker中的拷贝到&#xff1a;
阅读更多...
ubuntu学习（五）----读取文件以及光标的移动

ubuntu学习（五）----读取文件以及光标的移动

1、读取文件函数原型介绍 ssize_t read(int fd,void*buf,size_t count) 参数说明&#xff1a; fd: 是文件描述符 buf:为读出数据的缓冲区&#xff1b; count: 为每次读取的字节数&#xff08;是请求读取的字节数&#xff0c;读上来的数据保存在缓冲区buf中&#xff0c;同时文…
阅读更多...
ubuntu学习（四）----文件写入操作编程

ubuntu学习（四）----文件写入操作编程

1、write函数的详解 ssize_t write(int fd,const void*buf,size_t count); 参数说明&#xff1a; fd:是文件描述符&#xff08;write所对应的是写&#xff0c;即就是1&#xff09; buf:通常是一个字符串&#xff0c;需要写入的字符串 count&#xff1a;是每次写入的字节数…
阅读更多...
「2024」预备研究生mem-真题阶段-数学day02

「2024」预备研究生mem-真题阶段-数学day02

20230829-day02
阅读更多...
小程序input的placeholder不垂直居中的问题解决

小程序input的placeholder不垂直居中的问题解决

input的placeholder不垂直居中&#xff0c;input设置高度后&#xff0c;使用line-height只能使输入的文字垂直居中&#xff0c;但是placeholder不会居中&#xff0c;反而会偏上。 首先placeholder样式自定义 有两种方法&#xff0c;第一种行内样式&#xff1a; <input ty…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023