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代码࿱…...

利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...

简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
css的定位(position)详解:相对定位 绝对定位 固定定位
在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...

AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...
C#学习第29天:表达式树(Expression Trees)
目录 什么是表达式树? 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持: 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...

Chrome 浏览器前端与客户端双向通信实战
Chrome 前端(即页面 JS / Web UI)与客户端(C 后端)的交互机制,是 Chromium 架构中非常核心的一环。下面我将按常见场景,从通道、流程、技术栈几个角度做一套完整的分析,特别适合你这种在分析和改…...