当前位置: 首页 > news >正文

vue table合并行 动态列名

需求:

1.合并行,相同数据合并

2,根据后端返回数据动态显示列名,

我这个业务需求是,每年增加一列,也就是列名不是固定的,后端返回数据每年会多一条数据,根据返回数据显示列名

 实现:

html

<el-table v-loading="loading" :data="dataList" :span-method="objectSpanMethod"><el-table-column label="序号" align="center" type="index" :index="indexMethod" /><el-table-column label="一级" align="center" prop="type1name"  :show-overflow-tooltip="true" width="130px"/><el-table-column label="二级" align="center" prop="type2name" :show-overflow-tooltip="true"  width="130px"/><el-table-column label="三级" align="center" prop="type3name" :show-overflow-tooltip="true"  width="250px"/><el-table-column label="合计" align="center" prop="sums" :show-overflow-tooltip="true"/><el-table-column label="年份" align="center" prop="" :show-overflow-tooltip="true"><el-table-column v-for="(item,index) in titleList" :key="index" :label="item.title" :prop="item.value" align="center" width="60px"/></el-table-column>
</el-table>

js

<script>
import { listAnnualReporte } from "@/api/system/annualReport";export default {name: "annualReport",data() {return {// 遮罩层loading: true,    // 总条数total: 0,// 表格数据dataList: [],titleList: [],spanArr: [], //用于存放每一行记录的合并数pos: null,spanArr1: [],pos1: null};},created() {this.getList();},methods: {/** 查询列表 */getList() {this.loading = true;listAnnualReporte(this.queryParams).then(response => {let list = response.rows;console.log("年度报告");console.log(list);let tlist = [];for (let i = 0; i < list.length; i++) {let title = "20";let obj = list[i];//后端返回年份数据是c23,c24,c25,要拼成2023,2024,2025这样的列名Object.keys(obj).forEach(key => {let titleObj = {};let t = key.slice(0, 1);let tn = key.slice(1, 3);if (t == "c") {titleObj.title = title + tn;titleObj.value = key;tlist.push(titleObj);}return;});break;}//给table赋值this.dataList = list;//给动态列名赋值this.titleList = tlist;//合并列数据this.getSpanArr(list);this.loading = false;});},/** 自定义编号 */indexMethod(index) {let pageNum = this.queryParams.pageNum - 1;if (pageNum !== -1 && pageNum !== 0) {return index + 1 + pageNum * this.queryParams.pageSize;} else {return index + 1;}},getSpanArr(data) {this.pos = 0;this.pos1 = 0;for (let i = 0; i < data.length; i++) {if (i === 0) {// 如果是第一条记录(即索引是0的时候),向数组中加入1this.spanArr.push(1);this.pos = 0;this.spanArr1.push(1);this.pos1 = 0;} else {if (data[i].type1 === data[i - 1].type1) {// 如果name相等就累加,并且push 0 (这里的判断视自己的判定依据改变)this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {// 不相等push 1this.spanArr.push(1);this.pos = i;}if (data[i].type2 === data[i - 1].type2) {// 如果name相等就累加,并且push 0 (这里的判断视自己的判定依据改变)this.spanArr1[this.pos1] += 1;this.spanArr1.push(0);} else {// 不相等push 1this.spanArr1.push(1);this.pos1 = i;}}}},/** 合并行 */objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 用于设置要合并的列 0 表示第一列// 名称 跨行显示if ([1].includes(columnIndex)) {const cRow = this.spanArr[rowIndex];const cCol = cRow > 0 ? 1 : 0;return {rowspan: cRow, // 合并的行数colspan: cCol // 合并的列数,为0表示不显示};}if ([2].includes(columnIndex)) {const cRow = this.spanArr1[rowIndex];const cCol = cRow > 0 ? 1 : 0;return {rowspan: cRow, // 合并的行数colspan: cCol // 合并的列数,为0表示不显示};}},}
};
</script>

相关文章:

vue table合并行 动态列名

需求: 1.合并行,相同数据合并 2,根据后端返回数据动态显示列名, 我这个业务需求是,每年增加一列,也就是列名不是固定的,后端返回数据每年会多一条数据,根据返回数据显示列名 实现: html <el-table v-loading"loading" :data"dataList" :span-metho…...

Spring Cloud Alibaba-Nacos Discovery--服务治理

1 服务治理介绍 先来思考一个问题 通过上一章的操作&#xff0c;我们已经可以实现微服务之间的调用。但是我们把服务提供者的网络地址 &#xff08;ip&#xff0c;端口&#xff09;等硬编码到了代码中&#xff0c;这种做法存在许多问题&#xff1a; 一旦服务提供者地址变化&am…...

【C++】unordered_map和unordered_set的使用 及 OJ练习

文章目录 前言1. unordered系列关联式容器2. map、set系列容器和unordered_map、unordered_set系列容器的区别3. unordered_map和unordered_set的使用4. set与unordered_set性能对比5. OJ练习5.1 在长度 2N 的数组中找出重复 N 次的元素思路分析AC代码 5.2 两个数组的交集思路分…...

初识 JVM 01

JVM JRE JDK的关系 JVM 的内存机构 程序计数器 java指令的执行流程&#xff1a; 1 右侧的java源代码编译为左侧的java字节码&#xff08;右侧第一个方块对应左侧第一个方块&#xff09; 2 字节码 经过解释器 变为机器码 3 机器码就可以被cpu来执行 程序计数器的作用就…...

FPGA应用学习笔记----I2S和总结

时序一致在慢时序方便得多 增加了时序分布和分析的复杂性 使用fifo会开销大量资源...

归并排序之从微观看递归

前言 这次&#xff0c;并不是具体讨论归并排序算法&#xff0c;而是利用归并排序算法&#xff0c;探讨一下递归。归并排序的特点在于连续使用了两次递归调用&#xff0c;这次我们将从微观上观察递归全过程&#xff0c;从本质上理解递归&#xff0c;如果能看完&#xff0c;你一…...

Pytorch-day07-模型保存与读取

PyTorch 模型保存&读取 模型存储模型单卡存储&多卡存储模型单卡读取&多卡读取 1、模型存储 PyTorch存储模型主要采用pkl&#xff0c;pt&#xff0c;pth三种格式,就使用层面来说没有区别PyTorch模型主要包含两个部分&#xff1a;模型结构和权重。其中模型是继承n…...

【C语言每日一题】01. Hello, World!

题目来源&#xff1a;http://noi.openjudge.cn/ch0101/01/ 01. Hello, World! 总时间限制: 1000ms 内存限制: 65536kB 问题描述 对于大部分编程语言来说&#xff0c;编写一个能够输出“Hello, World!”的程序往往是最基本、最简单的。因此&#xff0c;这个程序常常作为一个初…...

arm: day8

1.中断实验&#xff1a;按键控制led灯 流程&#xff1a; key.h /*************************************************************************> File Name: include/key.h> Created Time: 2023年08月21日 星期一 17时03分20秒***************************************…...

k8s容器加入host解析字段

一、通过edit或path来修改 kubectl edit deploy /xxxxx. x-n cattle-system xxxxx为你的资源对象名称 二、添加字段 三、code hostAliases:- hostnames:- www.rancher.localip: 10.10.2.180...

浅谈开发过程中完善的注释的重要性

第一部分&#xff1a;引言 1.1 简述编程注释的定义和功能 编程注释是一种在源代码中添加的辅助性文字&#xff0c;它不参与编译或执行&#xff0c;但对于理解源代码起着至关重要的作用。注释可以简单地描述代码的功能&#xff0c;也可以详细地解释算法的工作原理、设计决策的…...

Docker 微服务实战

1. 通过IDEA新建一个普通微服务模块 1.1 建Module docker_boot 1.2 改写pom <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance&…...

JupyterHub实战应用

一、JupyerHub jupyter notebook 是一个非常有用的工具&#xff0c;我们可以在浏览器中任意编辑调试我们的python代码&#xff0c;并且支持markdown 语法&#xff0c;可以说是科研利器。但是这种情况适合个人使用&#xff0c;也就是jupyter notebook以我们自己的主机作为服务器…...

【MySQL】视图

目录 一、什么是视图 二、视图的操作 2.1 创建视图 2.2 删除视图 三、视图规则和限制 一、什么是视图 视图是一个虚拟表&#xff0c;其内容由查询定义。同真实的表一样&#xff0c;视图包含一系列带有名称的列和行数据。视图的数据变化会影响到基表&#xff08;创建视图所…...

基于 Android 剧院购票APP的开发与设计

摘要&#xff1a;近年来&#xff0c;随着社会的发展和科技方面的创新&#xff0c;越来越多的人选择使用手机应用程序来购买剧场票。本文将探讨基于 Android 平台的剧院购票应用程序的开发和设计。该应用程序将为用户提供浏览剧场列表、查看剧场详情、选择座位并购买剧场票的功能…...

反转链表II

江湖一笑浪滔滔&#xff0c;红尘尽忘了 题目 示例 思路 链表这部分的题&#xff0c;不少都离不开单链表的反转&#xff0c;参考&#xff1a;反转一个单链表 这道题加上哨兵位的话会简单很多&#xff0c;如果不加的话&#xff0c;还需要分情况一下&#xff0c;像是从头节点开始…...

HTML 和 CSS 来实现毛玻璃效果(Glassmorphism)

毛玻璃效果简介 它的主要特征就是半透明的背景&#xff0c;以及阴影和边框。 同时还要为背景加上模糊效果&#xff0c;使得背景之后的元素根据自身内容产生漂亮的“变形”效果&#xff0c;示例&#xff1a; 代码实现 首先&#xff0c;创建一个 HTML 文件&#xff0c;写入如下…...

【技术】国标GB28181视频平台EasyGBS通过对应密钥上传到其他平台展示的详细步骤

国标GB28181协议视频平台EasyGBS是基于国标GB28181协议的视频云服务平台&#xff0c;支持多路设备同时接入&#xff0c;并对多平台、多终端分发出RTSP、RTMP、FLV、HLS、WebRTC等格式的视频流。平台可提供视频监控直播、云端录像、云存储、检索回放、智能告警、语音对讲、平台级…...

SpeedBI数据可视化工具:浏览器上做分析

SpeedBI数据分析云是一种在浏览器上进行数据可视化分析的工具&#xff0c;它能够将数据以可视化的形式呈现出来&#xff0c;并支持多种数据源和图表类型。 所有操作&#xff0c;均在浏览器上进行 在浏览器中打开SpeedBI数据分析云官网&#xff0c;点击【免费使用】进入&#…...

8.21笔记

Deeplab-MSc-LargrFOC 此图除了主输出之外&#xff0c;还有五个支线输出&#xff0c;他们池化层与VGG网络不同&#xff0c;其中卷积核大小是3&#xff0c;而VGG中卷积核大小为2&#xff08;这个网络一开始是基于VGG网络提出的&#xff0c;因为那时候提出比较早&#xff0c;没有…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...