elementui的table根据是否符合需求合并列

在这里插入图片描述

 <el-table :data="tableData" border style="width: 100%;" :span-method="objectSpanMethodAuto"><!-- 空状态 --><template slot="empty"><div><img src="@/assets/images/noData.png" /></div><span>暂无数据</span></template><el-table-column type="index" label="序号" width="80" align="center"></el-table-column><el-table-column label="年度" align="center" prop="year"></el-table-column><el-table-column prop="regionName" label="行政区划" align="center"></el-table-column><el-table-column align="center"><template slot="header"><div class="header-con">(万人)</div><div class="header-name">农业人口数量</div></template><template slot-scope="scope"><div>{{ scope.row.ruralPopNum }}</div></template></el-table-column><el-table-column align="center"><template slot="header"><div class="header-con">(万人)</div><div class="header-name">城镇人口数量</div></template><template slot-scope="scope"><div>{{ scope.row.urbanPopNum }}</div></template></el-table-column><el-table-column label="操作" align="center"><template slot-scope="{ row }"><el-button type="text" size="small" class="operation" style="color: #2372ed;" @click="handleEditTable(row)">编辑</el-button><el-button type="text" size="small" class="operation" style="color: #2372ed;" @click="handleDelete(row)">删除</el-button></template></el-table-column></el-table>
data: function () {return {spanArr:[],tableData:[]}
}
getList() {getPopList(this.query).then((res) => {this.totalCount = res.total;this.tableData = res.rows;let contactDot = 0;let spanArr = [];this.tableData.forEach((item, index) => {if (index === 0) {console.log(spanArr);spanArr.push(1);} else {if (item.year === this.tableData[index - 1].year) {spanArr[contactDot] += 1;spanArr.push(0);} else {contactDot = index;spanArr.push(1);}}});this.spanArr = spanArr;});},
  // 合并行objectSpanMethodAuto({ row, column, rowIndex, columnIndex }) {console.log("点击:", row, column, rowIndex, columnIndex);if (columnIndex == 1 || columnIndex == 5) {if (this.spanArr[rowIndex]) {return {rowspan: this.spanArr[rowIndex],colspan: 1,};} else {return {rowspan: 0,colspan: 0,};}}},

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

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

相关文章

【多模态融合】SuperFusion 激光雷达与相机多层次融合 远距离高清地图预测 ICRA 2024

前言 本文介绍激光雷达与相机进行多层次融合&#xff0c;包括数据级融合、特征级融合和BEV级融合。 融合后的BEV特征可以支持不同的任务头&#xff0c;包括语义分割、实例编码和方向预测&#xff0c;最后进行后处理生成高清地图预测&#xff0c;它是来自ICRA 2024的。 会讲解…

【Java并发知识总结 | 第五篇】深入理解Synchronized底层原理(Monitor对象、Synchronized锁优化)

文章目录 5.深入理解Synchronized底层原理&#xff08;Monitor对象、Synchronized锁优化&#xff09;5.1Synchronized的特性5.1.1原子性5.1.2可见性5.1.3有序性5.1.4可重入性 5.2Synchronized的用法5.3Synchronized的两种同步方式4.3.1同步代码块5.3.2同步方法 5.4Synchronized…

脏牛提权(靶机复现)

目录 一、脏牛漏洞概述 二、漏洞复现 1.nmap信息收集 1.1.查看当前IP地址 1.2.扫描当前网段&#xff0c;找出目标机器 1.3.快速扫描目标机全端口 三、访问收集到的资产 192.168.40.134:80 192.168.40.134:1898 四、msf攻击 1.查找对应exp 2.选择对应exp并配置相关设…

uniApp中使用小程序XR-Frame创建3D场景(2)加载模型

上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用&#xff0c;只完成了简单的环境搭建&#xff0c;这篇文章讲解如何加载3D模型。 1 加入模型加载标签 在XR-Frame框架中&#xff0c;加载资源都是在wxml文件的标签中实现的。下面是wxml中完整的代码 index.wxml &l…

java Web线上网游商品交易平台用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 jsp线上网游商品交易平台是一套完善的web设计系统&#xff0c;对理解JSP java SERLVET mvc编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0…

React Native 应用打包

引言 在将React Native应用上架至App Store时&#xff0c;除了通常的上架流程外&#xff0c;还需考虑一些额外的优化策略。本文将介绍如何通过配置App Transport Security、Release Scheme和启动屏优化技巧来提升React Native应用的上架质量和用户体验。 配置 App Transport…

Linux文件和文件夹操作

一、文件操作 功能项命令实例作用文件创建vi /opt/learn/hello.txt 在目录/opt/learn下创建文件hello.txt并进入vi编辑界面 touch /opt/learn/test在目录/opt/learn下创建空白文件testcat > /opt/catfile创建文件catfile并在屏幕上输入内容&#xff0c;最后按 Ctrl D 退出…

【Node.js】WebSockets

概述 WebSockets是一种在浏览器和服务器之间建立持久连接的协议&#xff0c;它允许服务器主动推送数据给客户端&#xff0c;并且在客户端和服务器之间实现双向通信。 建立连接&#xff1a;客户端通过在JavaScript代码中使用WebSocket对象来建立WebSockets连接。例如&#xff1…

如何定位预防死锁

如何定位&预防死锁 什么是死锁&#xff1f; 简单来说就是并发环境下&#xff0c;两个或两个以上的线程互相等待资源&#xff0c;导致“永久阻塞”的现象 代码示例&#xff1a; public class Main {private static Object resource1 new Object();private static Objec…

达梦数据库自动备份(全库)+还原(全库) 控制台

一 前提 1.安装达梦数据库DB8(请参照以前文章) 我的数据库安装目录是 /app/dmDB8 2.已创建实例 (请参照上一篇文章) 二 准备测试数据 三 自动备份步骤 1.开启归档模式 开启DM管理工具管理控制台 弹不出来工具的 输入命令 xhost 第一步 将服务器转换为配置状态 右键-&g…

Kibana的安装(Linux版)

Kibana是一个针对Elasticsearch的开源分析及可视化平台&#xff0c;用来搜索、查看交互存储在Elasticsearch索引中的数据。使用Kibana&#xff0c;可以通过各种图表进行高级数据分析及展示。 Kibana让海量数据更容易理解。它操作简单&#xff0c;基于浏览器的用户界面可以快速创…

汽车电子行业知识:智能汽车电子架构

文章目录 3.智能汽车电子架构3.1.汽车电子概念及发展3.2.汽车电子架构类型3.2.1.博世汽车电子架构3.2.2.联合电子未来汽车电子架构3.2.3.安波福汽车电子架构3.2.4.丰田汽车电子架构3.2.5.华为汽车电子架构 3.智能汽车电子架构 3.1.汽车电子概念及发展 汽车电子是车体汽车电子…

阿里云对象存储OSS入门

阅读目录 一、阿里云OSS的使用 1、OSS是什么&#xff1f;2、OSS的使用 二、阿里云OSS的使用三、图床的搭建四&#xff1a;图床绑定阿里云OSS 编写不易&#xff0c;如果我的文章对你有帮助的话&#xff0c;麻烦小伙伴还帮忙点个赞再走&#xff01; 如果有小伙伴觉得写的啰嗦&am…

基于SIR模型的疫情发展趋势预测算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于SIR模型的疫情发展趋势预测算法.对病例增长进行SIR模型拟合分析&#xff0c;并采用模型参数拟合结果对疫情防控力度进行比较。整体思路为采用SIR微分方程模型…

PC电脑技巧[笔记本通过网线访问设备CMW500]

笔记本局域网访问设备 现在我有一台CMW500,我要用笔记本去访问它,但是我发现没有路由器就是不能够访问,通过网线连接设备就是ping不通: 这里设置TCP/IPv4的IP地址如下,这时候就可以pin通了:

Aspose.PDF功能演示:在 JavaScript 中合并两个 PDF 文件

在 Web 应用程序的世界中&#xff0c;处理和操作文档是一项常见的要求。当谈到 PDF 文件时&#xff0c;开发人员经常发现自己需要将 PDF 合并为单个 PDF 文件。因此&#xff0c;在这篇博文中&#xff0c;我们将探索如何使用强大的 PDF 库在 JavaScript 中轻松合并两个 PDF 文件…

【学习】软件测试行业 ,有哪些以就业为主的学习侧重点

今天给所有入行软测的同学们&#xff0c;帮大家梳理下以就业为主的学习侧重点&#xff0c;简单来说就是【这些都是重点&#xff0c;圈起来&#xff0c;要考的】&#xff0c;有需要的小伙伴可以往下看。 建议一&#xff1a;一定要学习一门编程语言&#xff0c;再开始使用自动化测…

Qt Design Studio 软件怎么用(详细+通俗+有趣)

建议&#xff1a;本文长期更新&#xff0c;建议点赞/收藏&#xff01; 1. 啥是Qt Design Studio&#xff1f; Qt Design Studio 是一个用于设计和开发用户界面的工具&#xff0c;特别适合开发跨平台应用程序。它结合了UI设计和开发的工作流程&#xff0c;使得设计师和开发者可…

[WTL/Win32]_[初级]_[如何设置ListView的列宽不出现水平滚动条]

场景 开发WTL/Win32的程序时&#xff0c;经常会用到表格控件CListViewCtrl。这个控件需要设置列的宽度&#xff0c;当用完100%的宽度来平均分配给列宽时&#xff0c;一加载数据多&#xff0c;就会出现垂直滚动条后&#xff0c;水平滚动条也会同时出现的问题。怎么设置才能让水…

搭建 Apple Mac M1 stm32 开发环境

近期想学习 stm32 开发,看了些书和视频,买了开发板。开发板到了后就迫不及待的的进行尝试。由于我目前使用的电脑是 Apple M1 Pro,目前用的比较多的是 windows + keil。我先是在 mac 使用虚拟机,安装 win 环境来使用,但是我分别使用了 VMware 和 parallels desktop ,keil…