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>
相关文章:

el-table动态生成多级表头的表格(js + ts)
展示形式: 详细代码: (js) <template><div><el-table :data"tableData" style"width: 100%"><el-table-column label"题目信息" align"center"><el-table-…...

四、Kafka Broker
4.1.1 Zookeeper 存储的 Kafka 信息 4.1.2 Kafka Broker 总体工作流程 4.2 生产经验 - 节点的服役和退役 自己的理解:其实就是将kafka的分区,负载到集群中的各个节点上。 1、服役新节点 2、退役旧节点 4.3 kafka副本 1、副本的作用 2、Leader的选…...

ssm+vue医院医患管理系统源码和论文
ssmvue医院医患管理系统源码和论文077 开发工具:idea 数据库mysql5.7 数据库链接工具:navcat,小海豚等 技术:ssm vue.js 摘 要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已…...

汽车电子笔记之:基于AUTOSAR的电机控制器架构设计
目录 1、概述 2、AUTOSAR设计 2.1、SWC设计 2.2、PORT设计 2.3、Runnable设计 2.4、电机控制器OS实现 1、概述 电机控制器应用层的软件架构较为复杂,主要包括PMSM(Permanent-MagnetSynchronous Motor)的矢量控制算法。根据PMSM的控制算法,对算法中的软件功能进行分析&…...
Docker 可以共享主机的参数
命令 docker run -it --ipchost nginx:latest /bin/bashdocker run -it --nethost nginx:latest /bin/bashdocker run -it --pidhost nginx:latest /bin/bashdocker run -it --utshost nginx:latest /bin/bash 参考 Docker run reference | Docker Docs...
STL之list模拟实现(反向迭代器讲解以及迭代器失效)
这次是关于list的模拟实现的代码,先看看下面的代码: #pragma once #include <iostream> #include "reve_iterator.hpp" using namespace std; namespace cc {//链表节点template<class T>struct ListNode{T _val;ListNode *_next…...
Firewalld防火墙新增端口、开启、查看等
Linux操作系统中,Firewalld防火墙相关操作如下: 安装 yum install firewalld firewalld-configFirewall开启常见端口命令 新增防火墙端口命令: firewall-cmd --zonepublic --add-port80/tcp --permanentfirewall-cmd --zonepublic --add-…...

【腾讯云 TDSQL-C Serverless 产品测评】- 云原生时代的TDSQL-C MySQL数据库技术实践
一、活动介绍: “腾讯云 TDSQL-C 产品测评活动”是由腾讯云联合 CSDN 推出的针对数据库产品测评及产品体验活动,本次活动主要面向 TDSQL-C Serverless版本,初步的产品体验或针对TDSQL-C产品的自动弹性能力、自动启停能力、兼容性、安全、并发…...
计算机硬件基础
计算机硬件基础 教程:计算机硬件基础_哔哩哔哩_bilibili 一.计算机的分类 台式机、笔记本电脑、上网本、超薄笔记本、平板电脑、游戏本、智能手机、超级移动电脑、便携式电脑、车用电脑、工作站、服务器、工业电脑IPC、ECDIS 二.机箱 放硬件的地方、一般由钢和铝等…...

云计算和Docker分别适用场景
在大规模网络爬虫系统中,通过使用云计算和Docker技术,可以实现大规模网络爬虫系统的高效架构设计和部署。这种架构能够提供可扩展性、高可用性和灵活性,为爬虫系统的运行和管理带来便利。 云计算和Docker在大规模网络爬虫系统中有不同的业务…...

oracle 基础运用2
首先在电脑上安装PLSQL developer,这个是oracle图形化连接工具,然后安装win64_11gR2_client,这个是orace客户端,安装完成后可以在cmd命令行输入sqlplus命令进行验证,如图表示安装成功。 作为sys的连接应该是SySDBA或Sy…...

ThinkPHP 资源路由的简单使用,restfull风格API
ThinkPHP 资源路由的简单使用,restfull风格API 一、资源控制器二、资源控制器简单使用 一、资源控制器 资源控制器可以轻松的创建RESTFul资源控制器,可以通过命令行生成需要的资源控制器,例如生成index应用的TestR资源控制器使用:…...
利用前缀树获取最小目录
一、任务名: 开发最小目录工具 二、任务描述 开发工具,从桶清单文件中列举出所有最小目录,并列举出每一个最小目录中包含的文件总数与文件总量。 最小目录的解释: 有以下几个目录 a/b/1.txt a/b/2/txt a/3.txt a/b/c/ 则&…...

Java【手撕双指针】LeetCode 18. “四数之和“, 图文详解思路分析 + 代码
文章目录 前言一、四数之和1, 题目2, 思路分析3, 代码 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: 📕 JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 📗 Java数据结构: 顺序表, 链表, 堆…...
OpenCV处理图像和计算机视觉任务时常见的算法和功能
当涉及到OpenCV处理图像和计算机视觉任务时,有许多常见的具体算法和功能。以下是一些更具体的细分: 图像处理算法: 图像去噪:包括均值去噪、高斯去噪、中值滤波等,用于减少图像中的噪声。 直方图均衡化:用…...

Flutter实现StackView
1.让界面之间可以嵌套且执行动画。 2.界面的添加遵循先进后出原则。 3.需要使用AnimateView,请看我上一篇博客。 演示: 代码: Stack: import package:flutter/cupertino.dart;///栈,先进后出 class KqWidgetStack {final Lis…...
c++ future与promise
C11 标准中 头文件中包含了以下几个类和函数: Providers 类:std::promise, std::package_taskFutures 类:std::future, shared_future.Providers 函数:std::async()其他类型:std::future_error, std::future_errc, st…...
在x86机器上的Docker运行arm64容器
1. 引言 工作中常用电脑主机CPU为x86架构,有时由于产品需要,我们需要编译aarch64架构的SDK或者应用程序供使用或者测试。 一种比较快捷的方式是使用aarch64的CPU构建相应操作系统,实现真机运行。但在无arm架构CPU环境下,我们可否…...

centos7删除乱码文件
centos7删除乱码文件1. 小白教程,一看就会,一做就成。 1.解释 当文件名为乱码的时候,无法通过键盘输入文件名,所以在终端下就不能直接利用rm,mv等命令管理文件了。 但是每个文件都有一个i节点号,可以通过…...

uni-app里使用webscoket
实现思路和vue中是一样的。如果想看思路可以看这篇文章:websocket 直接上可以运行的代码: 一、后端nodeJS代码: 1、新建项目文件夹 2、初始化项目: npm init -y 3、项目里安装ws npm i ws --save 4、nodeJS代码࿱…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...

vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...