el-table 动态渲染多级表头;一级表头根据数据动态生成,二级表头固定

一、表格需求:

实现一个动态表头,一级表头,根据数据动态生成,二级表头固定,每列的数据不一样,难点在于数据的处理。做这种表头需要两组数据,一组数据是实现表头的,另一组数据是内容渲染的。
在这里插入图片描述

二、分析思路

想实现这种效果就得造数据,按照示例的话,我们在数据渲染是表头数据是这种结构

<el-table-column label="房型名称" align="center"><el-table-columnv-for="(item1, index1) in tableColData":key="index1"align="center"prop="":label="item1.label"><el-table-columnv-for="(item2, index2) in item1.children":key="index2":prop="item2.prop":label="item2.label"align="center"></el-table-column></el-table-column></el-table-column>
//表头数据 
tableColData: [{label: "大床房元/间",children: [{prop: "livePerson0",label: "入住人数",},{prop: "roomNumber0",label: "客房数量",},{prop: "liveDays0",label: "入住天数",},],},{label: "小床房元/间",children: [{prop: "livePerson1" label: "入住人数",},{prop: "roomNumber1" label: "客房数量",},{prop: "liveDays1"label: "入住天数",},],},
],

解决了表头数据,接下来就是得改造表数据了,改造数据内容,我们需要的表数据内容是这个样子的

// 表数据
tableList: [{livePerson0: 1,roomNumber0: 1,liveDays0: 1,},{livePerson1: 2,roomNumber1: 1,liveDays1: 10,},
],

接下来就是根据后端返回的数据内容改造成我们想要的表头数据和表数据了。

三、实现

后端返回给我的数据内容是这个样子的:

tableList: [{"month": "2023-05","data": [{"room_type_name": "大床房","total_live_days": 1,"total_price": 0.01,"project_id": 118,"price": 0.01,"total_room_number": 1,"room_type_id": 1,"total_live_person": 1}],"total_price": 0.01},{"month": "2023-06","data": [{"room_type_name": "大床房","total_live_days": 8,"total_price": 0.1,"project_id": 118,"price": 0.01,"total_room_number": 9,"room_type_id": 1,"total_live_person": 15},{"room_type_name": "总统房","total_live_days": 1,"total_price": 0.01,"project_id": 118,"price": 0.01,"total_room_number": 1,"room_type_id": 3,"total_live_person": 1}],"total_price": 0.11},{"month": "2023-07","data": [{"room_type_name": "大床房","total_live_days": 2,"total_price": 0.04,"project_id": 121,"price": 0.01,"total_room_number": 2,"room_type_id": 1,"total_live_person": 4},{"room_type_name": "小床房","total_live_days": 1,"total_price": 0.01,"project_id": 118,"price": 0.01,"total_room_number": 1,"room_type_id": 2,"total_live_person": 1}],"total_price": 0.05}]

自己改造的代码:

    getRoomType() {let roomTypeName = [];this.tableColData = [];this.tableList.forEach(item => {item.data.forEach(citem => {const index = roomTypeName.findIndex(i => i.room_type_name == citem.room_type_name);if (index == -1) {//去重,==-1找不到,就push进去roomTypeName.push(citem);}});});console.log(roomTypeName, "获取表头房间名称的动态数据");//   添加表头数据roomTypeName.forEach((item, index) => {this.tableColData.push({label: `${item.room_type_name}${item.price}元/间)`,children: [{prop: "livePerson" + index,label: "入住人数"},{prop: "roomNumber" + index,label: "客房数量"},{prop: "liveDays" + index,label: "入住天数"}]});});// 添加表数据this.tableList.forEach(data => {data.data.forEach(item => {roomTypeName.forEach((citem, cindex) => {if (item.room_type_name == citem.room_type_name) {data["livePerson" + cindex] = item.total_live_person;data["roomNumber" + cindex] = item.total_room_number;data["liveDays" + cindex] = item.total_live_days;}});});});console.log(this.tableList, "this.tableList");},

最终我的表数据改造成这个样子,实现了我想要的需求。

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

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

相关文章

Web网页生成桌面应用

前言&#xff1a;网页生成桌面指的是将一个网页保存为桌面应用程序的形式&#xff0c;使得用户可以在桌面上直接打开该网页&#xff0c;而不必通过浏览器打开。这种桌面应用程序一般具有独立的窗口、菜单、工具栏等界面元素&#xff0c;能够提供更加方便快捷的使用体验。 实现…

【pytorch】pytorch学习笔记(续1)

p22&#xff1a;1.加减乘除&#xff1a; &#xff08;1&#xff09;add(a,b)&#xff1a;等同于ab。 &#xff08;2&#xff09;sub(a,b)&#xff1a;等同于a-b。 &#xff08;3&#xff09;mul(a,b)&#xff1a;等同于a*b。 &#xff08;4&#xff09;div(a,b)&#xff1a…

PID控制算法,带C语言源码实现

1 PID简介 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&#xff09;、Differential&#xff08;微分&#xff09;的缩写。PID控制算法是结合比例、积分和微分三种环节于一体的控制算法。PID算法是连续系统中技术最为成熟、应用最为…

gitlab runner 安装、注册、配置、使用(Docker部署)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

【工具使用-Everything】everything只能搜到文件夹,无法搜到文件

一&#xff0c;问题现象 everything搜索时&#xff0c;只能搜索到文件夹&#xff0c;无法搜索到文件夹下的文件。 二&#xff0c;问题原因 everything搜索设置问题&#xff0c;设置为"文件夹"导致 三&#xff0c;解决方法 将搜索选项设置为“所有”即可&#x…

5 新增课程

5.1 需求分析 5.1.1 业务流程 根据前边对内容管理模块的数据模型分析&#xff0c;课程相关的信息有&#xff1a;课程基本信息、课程营销信息、课程图片信息、课程计划、课程师资信息&#xff0c;所以新增一门课程需要完成这几部分信息的填写。 以下是业务流程&#xff1a; …

全链路压测:提升业务可靠性和可用性

全链路压测是一种全面评估系统性能和稳定性的测试方法&#xff0c;通过模拟真实用户场景和流程来验证整个应用系统在高负载情况下的表现。全链路压测的主要作用涵盖了多个方面&#xff1a; 性能评估与优化&#xff1a; 全链路压测可以全面评估系统在高负载下的性能表现&#xf…

代码评审——随机数Random问题

问题描述&#xff1a; 为了获取唯一值&#xff0c;经常会依赖产生随机数来保证唯一性。在获取随机数时&#xff0c;如果使用错误的方法&#xff0c;会比较低效。 可以参考以下代码&#xff1a; public static String geneRundomNo(){Random rnew Random();int numr.nextInt(…

day31_CSS

今日内容 CSS概述引入方式 (where)选择器(how)属性(how) 1 CSS介绍 层叠样式表&#xff08;cascading style sheet&#xff09; CSS 用来美化HTML页面,可以让页面更好看,还可以布局页面. 好处 美化页面,布局页面使用外部css文件,可以实现样式文件和html文件分离,便于维护使用外…

5.ROC-AUC机器学习模型性能的常用的评估指标

最近回顾机器学习基础知识部分的时候&#xff0c;看到了用于评估机器学习模型性能的ROC曲线。再次记录一下&#xff0c;想起之前学习的时候的茫然&#xff0c;希望这次可以更加清晰的了解这一指标。上课的时候听老师提起过&#xff0c;当时没有认真去看&#xff0c;所以这次可以…

SpeechGPT-Gen;使用Agents编辑图像;多模态扩散模型图像生成

本文首发于公众号&#xff1a;机器感知 SpeechGPT-Gen&#xff1b;使用Agents编辑图像&#xff1b;多模态扩散模型图像生成&#xff1b; CCA: Collaborative Competitive Agents for Image Editing This paper presents a novel generative model, Collaborative Competitive…

多流转换 (分流,合流,基于时间的合流——双流联结 )

目录 一&#xff0c;分流 1.实现分流 2.使用侧输出流 二&#xff0c;合流 1&#xff0c;联合 2&#xff0c;连接 三&#xff0c;基于时间的合流——双流联结 1&#xff0c;窗口联结 1.1 窗口联结的调用 1.2 窗口联结的处理流程 2&#xff0c;间隔联结 2.1 间隔联…

<网络安全>《2 国内主要企业网络安全公司概览(二)》

4 北京天融信科技有限公司(简称天融信) 信息内容LOGO成立日期创始于1995年总部北京市海淀区上地东路1号院3号楼北侧301室背景民营企业是否上市天融信[002212]A股市值99亿主要产品网络安全大数据云服务员工规模6000多人简介天融信科技集团&#xff08;证券代码&#xff1a;0022…

书生·浦语大模型实战营-学习笔记6

目录 OpenCompass大模型测评1. 关于评测1.1 为什么要评测&#xff1f;1.2 需要评测什么&#xff1f;1.3 如何评测&#xff1f;1.3.1 客观评测1.3.2 主观评测1.3.3 提示词工程评测 2. 介绍OpenCompass工具3. 实战演示 OpenCompass大模型测评 1. 关于评测 1.1 为什么要评测&#…

人工智能系列 :与机器共生的未来

大家好&#xff0c;身处一个日新月异的时代&#xff0c;科技的浪潮汹涌而至&#xff0c;将人们推向未知的前方&#xff0c;一个充满人工智能与机器的世界。 这个未知的境地&#xff0c;或许令人心生恐慌&#xff0c;因为它的庞大未知性仿佛一团迷雾&#xff0c;模糊了大家的视…

Unity Mask合批情况验证

1.首先是两个Mask完全重合的情况下 每张图片使用的image都来自同一个图集 发现彼此之间是没有合批的&#xff0c;但是每个Mask内部是实现了合批的 经过计算此种情况的visiableList&#xff1a;mask1&#xff0c;IM1&#xff0c;IM2&#xff0c;mask2&#xff0c;IM3&#xf…

Docker安装Clickhouse详细教程

简介 ClickHouse是一种列式数据库管理系统&#xff0c;专门用于高性能数据分析和数据仓库应用。它是一个开源的数据库系统&#xff0c;最初由俄罗斯搜索引擎公司Yandex开发&#xff0c;用于满足大规模数据分析和报告的需求。 特点 开源的列式存储数据库管理系统&#xff0c;…

不学前沿技术与朽木浮草何异 ?Java18新特性

不学前沿技术与朽木浮草何异 &#xff1f;Java18新特性 文章目录 不学前沿技术与朽木浮草何异 &#xff1f;Java18新特性JEP 400:默认字符集为 UTF-8JEP 408:简易的 Web 服务器JEP 413:优化 Java API 文档中的代码片段JEP 416:使用方法句柄重新实现反射核心JEP 417: 向量 API&a…

06.搭建一个自己的私有仓库-Gitea

06.搭建一个自己的私有仓库-Gitea | DLLCNX的博客 如果你是一位程序员或者IT相关领域的从业者&#xff0c;那么肯定知道git&#xff0c;而且也或多或少接触了不少开源仓库以及公司的私有仓库&#xff0c;但是我们有没有想过自己也搭建一个私有仓库呢。 这么多开源仓库&#xf…

【51单片机系列】proteus中的LCD12864液晶屏

文章来源&#xff1a;《单片机C语言编程与Proteus仿真技术》。 点阵字符型LCD显示模块只能显示英文字符和简单的汉字&#xff0c;要想显示较为复杂的汉字或图形&#xff0c;就必须采用点阵图型LCD显示模块&#xff0c;比如12864点阵图型LCD显示模块。 文章目录 一、 LCD12864点…