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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Matlab图像处理-垂直镜像

Matlab图像处理-垂直镜像

垂直镜像 图像的垂直镜像操作是以原图像的水平中轴线为中心&#xff0c;将图像分为上下两部分进行对称变换。 设原始图像的宽为w&#xff0c;高为h&#xff0c;原始图像中的点为(&#x1d465;0,&#x1d466;0)(x_0,y_0)&#xff0c;对称变换后的点为(&#x1d465;1,&#…
阅读更多...
阿里云大数据实战记录8：拆开 json 的每一个元素，一行一个

阿里云大数据实战记录8：拆开 json 的每一个元素，一行一个

目录 一、前言二、目标介绍三、使用 pgsql 实现3.1 拆分 content 字段3.2 拆分 level 字段3.3 拼接两个拆分结果 四、使用 ODPS SQL 实现4.1 拆分 content 字段4.2 拆分 level 字段4.3 合并拆分 五、使用 MySQL 实现六、总结 一、前言 商业场景中&#xff0c;经常会出现新的业…
阅读更多...
第62步 深度学习图像识别：多分类建模（Pytorch）

第62步 深度学习图像识别：多分类建模（Pytorch）

基于WIN10的64位系统演示 一、写在前面 上期我们基于TensorFlow环境做了图像识别的多分类任务建模。 本期以健康组、肺结核组、COVID-19组、细菌性&#xff08;病毒性&#xff09;肺炎组为数据集&#xff0c;基于Pytorch环境&#xff0c;构建SqueezeNet多分类模型&#xff0…
阅读更多...
MyBatis-Plus 总结

MyBatis-Plus 总结

MyBatis-Plus简介 官网&#xff1a;https://baomidou.com/ GitHub&#xff1a;https://github.com/baomidou/mybatis-plus Gitee&#xff1a;https://gitee.com/baomidou/mybatis-plus 简介 MyBatis-Plus &#xff08;简称 MP&#xff09;是一个 MyBatis的增强工具&#x…
阅读更多...
Maven - 使用maven-release-plugin规范化版本发布

Maven - 使用maven-release-plugin规范化版本发布

文章目录 Maven Release plugin – IntroductionMaven Release plugin – Plugin DocumentationMaven Release plugin – Usage实战案例 Maven Release plugin – Introduction Maven Release Plugin&#xff08;Maven 发布插件&#xff09;是一个用于帮助在Maven项目中执行版…
阅读更多...
hadoop学习：mapreduce入门案例二：统计学生成绩

hadoop学习：mapreduce入门案例二：统计学生成绩

这里相较于 wordcount&#xff0c;新的知识点在于学生实体类的编写以及使用 数据信息&#xff1a; 1. Student 实体类 import org.apache.hadoop.io.WritableComparable;import java.io.DataInput; import java.io.DataOutput; import java.io.IOException;public class Stude…
阅读更多...
java八股文面试[多线程]——合适的线程数是多少

java八股文面试[多线程]——合适的线程数是多少

知识来源&#xff1a; 【并发与线程】 合适的线程数量是多少&#xff1f;CPU 核心数和线程数的关系&#xff1f;_哔哩哔哩_bilibili 【2023年面试】程序开多少线程合适_哔哩哔哩_bilibili
阅读更多...
LeetCode 44题：通配符匹配

LeetCode 44题：通配符匹配

题目 给你一个输入字符串 (s) 和一个字符模式 (p) &#xff0c;请你实现一个支持 ? 和 * 匹配规则的通配符匹配&#xff1a; ? 可以匹配任何单个字符。* 可以匹配任意字符序列&#xff08;包括空字符序列&#xff09;。 判定匹配成功的充要条件是&#xff1a;字符模式必须…
阅读更多...
Python实现自动关键词提取

Python实现自动关键词提取

随着互联网的发展&#xff0c;越来越多的人喜欢在网络上阅读小说。本文将通过详细示例&#xff0c;向您介绍如何使用Python编写爬虫程序来获取网络小说&#xff0c;并利用自然语言处理技术实现自动文摘和关键词提取功能。 1. 网络小说数据抓取 首先&#xff0c;请确保已安装必…
阅读更多...
Kotlin协程简述与上下文和调度器（Dispatchers ）

Kotlin协程简述与上下文和调度器（Dispatchers ）

协程概述 子程序或者称为函数&#xff0c;在所有的语言中都是层级调用&#xff0c;如&#xff1a;A调用B&#xff0c;B在执行过程中又调用了C&#xff0c;C执行完毕返回&#xff0c;B执行完毕返回&#xff0c;最后是A执行完毕。所以子程序是 通过栈来实现的&#xff0c;一个线…
阅读更多...
使用安全复制命令scp在Windows系统和Linux系统之间相互传输文件

使用安全复制命令scp在Windows系统和Linux系统之间相互传输文件

现在已经有很多远程控制服务器的第三方软件平台&#xff0c;比如FinalShell&#xff0c;MobaXterm等&#xff0c;半可视化界面&#xff0c;使用起来非常方便和友好&#xff0c;两个系统之间传输文件直接拖就行&#xff0c;当然也可以使用命令方式在两个系统之间相互传递。 目录…
阅读更多...
git 基础

git 基础

1.下载安装Git&#xff08;略&#xff09; 2.打开git bash窗口 3.查看版本号、设置用户名和邮箱 用户名和邮箱可以随意起&#xff0c;与GitHub的账号邮箱没有关系 4.初始化git 在D盘中新建gitspace文件夹&#xff0c;并在该目录下打开git bash窗口 git init 初始化完成后会…
阅读更多...
基于深度学习的机器视觉表计识别

基于深度学习的机器视觉表计识别

01 引言 针对仪表自动读数问题&#xff0c;新型数字式仪表的读数比较方便&#xff0c;现阶段已经有非常多成熟的方案落地&#xff0c;而针对传统指针式仪表自动读数的现有方案还不够成熟&#xff0c;存在识别不精确、易受环境干扰等问题&#xff0c;是亟待研究和攻克的难题。我…
阅读更多...
ICS PA1

ICS PA1

ICS PA1 init.shmake 编译加速ISA计算机是个状态机程序是个状态机准备第一个客户程序parse_argsinit_randinit_loginit_meminit_isa load_img剩余的初始化工作运行第一个客户程序调试&#xff1a;零断点TUI 基础设施单步执行打印寄存器状态扫描内存 表达式求值词法分析递归求值…
阅读更多...
Vue.js2+Cesium1.103.0 十一、Three.js 炸裂效果

Vue.js2+Cesium1.103.0 十一、Three.js 炸裂效果

Vue.js2Cesium1.103.0 十一、Three.js 炸裂效果 Demo ThreeModelBoom.vue <template><div:id"id"class"three_container"/> </template><script> /* eslint-disable eqeqeq */ /* eslint-disable no-unused-vars */ /* eslint-d…
阅读更多...
20 MySQL（下）

20 MySQL（下）

文章目录 视图视图是什么定义视图查看视图删除视图视图的作用 事务事务的使用 索引查询索引创建索引删除索引聚集索引和非聚集索引影响 账户管理&#xff08;了解非DBA&#xff09;授予权限 与 账户的相关操作 MySQL的主从配置 视图 视图是什么 通俗的讲&#xff0c;视图就是…
阅读更多...
（Windows ）本地连接远程服务器（Linux），免密码登录设置

（Windows ）本地连接远程服务器（Linux），免密码登录设置

在使用VScode连接远程服务器时&#xff0c;每次打开都要输入密码&#xff0c;以及使用ssh登录或其它方法登录&#xff0c;都要本地输入密码&#xff0c;这大大降低了使用感受&#xff0c;下面总结了免密码登录的方法&#xff0c;用起来巴适得很&#xff0c;起飞。 目录 PowerSh…
阅读更多...
数据仓库总结

数据仓库总结

1.为什么要做数仓建模 数据仓库建模的目标是通过建模的方法更好的组织、存储数据&#xff0c;以便在性能、成本、效率和数据质量之间找到最佳平衡点。 当有了适合业务和基础数据存储环境的模型&#xff08;良好的数据模型&#xff09;&#xff0c;那么大数据就能获得以下好处&…
阅读更多...
深入了解Nginx：高性能的开源Web服务器与反向代理

深入了解Nginx：高性能的开源Web服务器与反向代理

一、Nginx是什么 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器&#xff0c;也可以作为负载均衡器和HTTP缓存服务器使用。它采用事件驱动、异步非阻塞的处理方式&#xff0c;能够处理大量并发连接和高流量负载&#xff…
阅读更多...
supervisorctl（-jar）启动配置设置NACOS不同命名空间

supervisorctl（-jar）启动配置设置NACOS不同命名空间

背景 由于需要在上海服务器上面配置B测试环境&#xff0c;原本上面已有A测试环境&#xff0c;固需要将两套权限系统分开 可以使用不同的命名空间来隔离启动服务 注&#xff1a;本文章均不涉及公司机密 1、新建命名空间 命名空间默认会有一个public&#xff0c;并且不能删除&a…
阅读更多...
最新文章

Copyright @ 2022~2023