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.mzph.cn/news/781394.shtml

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

相关文章

Opencv-光流算法-实战

0. 写在前面 理论介绍篇在&#xff1a;图像处理算法--光流法-原理-CSDN博客 2. Main函数代码 #include "mainwindow.h" #include "ui_mainwindow.h"#include <QFileDialog> #include <QLabel> #include <QDebug>MainWindow::MainWindo…

基于SSM+Jsp+Mysql的母婴用品网站

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

新能源汽车充电桩主板的常见故障及解决办法

电桩主板作为充电桩的核心组件&#xff0c;直接影响着充电桩运行的安全性与稳定性。然而&#xff0c;在使用过程中&#xff0c;充电桩主板会因多种原因而出现一些故障情况&#xff0c;了解这些原因并采取相应的应对方法对维护充电桩的正常运行起着至关重要的作用。接下来&#…

【LeetCode】合并两个有序数组

88. 合并两个有序数组 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&am…

3-zookeeper之ZAB协议

Zookeeper ZAB协议 概述 ZAB(Zookeeper Automic Broadcast)是一套专门为Zookeeper设计的用于进行原子广播和崩溃恢复的协议ZAB协议主要包含了两个功能 原子广播&#xff1a;保证数据一致性崩溃恢复&#xff1a;保证集群的高可用 ZAB协议本身是基于2PC算法来进行的设计&#…

Redis 红锁:分布式锁的强大实现

在分布式系统中&#xff0c;多个进程或线程可能需要并发访问共享资源。为了确保数据的一致性和正确性&#xff0c;我们需要一种分布式锁机制来协调这些访问。Redis 红锁就是这样一种强大的分布式锁实现。 一、分布式锁的概念 分布式锁是一种用于在分布式系统中实现资源互斥访…

U盘位置不可用,如何轻松应对数据恢复难题

在日常工作和生活中&#xff0c;U盘作为一种便捷的存储设备&#xff0c;经常被用于数据传输和备份。然而&#xff0c;有时我们可能会遇到这样一个问题&#xff1a;当插入U盘时&#xff0c;系统提示“位置不可用”或“无法访问”&#xff0c;这让人倍感困扰。面对这种情况&#…

wpsword求和操作教程

wpsword求和怎么操作&#xff1a; 1、首先&#xff0c;单纯的数据是无法求和的&#xff0c;所以我们必须要“插入”一个“表格” 2、接着将需要求和的数据填入到表格中。 3、填完后&#xff0c;进入“布局”选项卡。 4、然后打开其中的“公式” 5、在其中选择求和公式“SUM”并…

Go、Java、C++语言实现多态的方式

Go、Java、C语言实现多态的方式各有特色&#xff0c;但都遵循面向对象编程的基本原则。以下是各自实现多态的主要手段&#xff1a; Go语言&#xff1a; 虽然Go语言本身并不直接支持类和传统的面向对象继承&#xff0c;但它通过接口&#xff08;Interface&#xff09;实现了多态…

php高精度数学计算 - bc函数

PHP中的bc函数是用于高精度计算的函数&#xff0c;可以处理大数运算&#xff0c;支持加、减、乘、除、幂运算等。bc函数的语法如下&#xff1a; bc***(string $num1,string $num2, int $scale 0) : string参数说明&#xff1a; $num1&#xff1a;要进行计算的数值&#xff0c…

从0到1部署私域NuGet库:实战指南,让你轻松掌握!

引言 私域NuGet包的重要性&#xff1a;代码复用和团队协同。通过将公共组件、库或工具打包成NuGet包&#xff0c;并在私域中共享&#xff0c;团队成员可以更方便地引用和使用这些资源。其次私域NuGet包有助于依赖管理。通过私域NuGet包&#xff0c;团队可以集中管理这些依赖&a…

案例研究|DataEase实现物业数据可视化管理与决策支持

河北隆泰物业服务有限责任公司&#xff08;以下简称为“隆泰物业”&#xff09;创建于2002年&#xff0c;总部设在河北省高碑店市&#xff0c;具有国家一级物业管理企业资质&#xff0c;通过了质量体系、环境管理体系、职业健康安全管理体系等认证。自2016年至今&#xff0c;隆…

启信宝商业大数据助力全国经济普查

近日&#xff0c;合合信息旗下启信宝收到中国青年创业就业基金会感谢信&#xff0c;对启信宝协同助力全国经济普查和服务青年创业就业研究表达感谢。 第五次全国经济普查是新时代新征程上一次重大国情国力调查&#xff0c;是对国民经济“全面体检”和“集中盘点”&#xff0c;…

virtualbox 设置虚拟机 centos 网络

在VirtualBox中为运行CentOS系统的虚拟机配置网络连接&#xff0c;您通常可以选择以下几种网络模式之一&#xff0c;以满足不同的网络需求&#xff1a; NAT (Network Address Translation): 功能&#xff1a;允许虚拟机通过宿主机的网络连接访问互联网&#xff0c;同时也可以从…

学习鸿蒙基础(10)

目录 一、轮播组件 Swiper 二、列表-List 1、简单的List 2、嵌套的List 三、Tabs容器组件 1、系统自带tabs案例 2、自定义导航栏&#xff1a; 一、轮播组件 Swiper Entry Component struct PageSwiper {State message: string Hello Worldprivate SwCon: SwiperControl…

Ribbon简介

目录 一 、概念介绍 1、Ribbon是什么 2、认识负载均衡 2.1 服务器端的负载均衡 2.2 客户端的负载均衡 3、Ribbon工作原理 4、Ribbon的主要组件 IClientConfig ServerList ServerListFilter IRule Iping ILoadBalancer ServerListUpdater 5、Ribbon支持…

为什么Redis设计成单线程

Redis是单线程却能支持高并发 1.Redis 将数据存储在内存中&#xff0c;读取速度非常快&#xff0c;而写入操作通常采用异步持久化的方式&#xff0c;将数据定期写入到磁盘&#xff0c;避免了磁盘IO成为性能瓶颈。这样一来&#xff0c;Redis 可以在高速内存中快速响应读取请求&…

BGP实训

BGP基础配置实训 实验拓扑 注&#xff1a;如无特别说明&#xff0c;描述中的 R1 或 SW1 对应拓扑中设备名称末尾数字为 1 的设备&#xff0c;R2 或 SW2 对应拓扑中设备名称末尾数字为2的设备&#xff0c;以此类推&#xff1b;另外&#xff0c;同一网段中&#xff0c;IP 地址的主…

2024四川省赛“信息安全管理与评估“--网络事件响应--应急响应(高职组)

2024四川省赛“信息安全管理与评估“(高职组)任务书 2024四川省赛“信息安全管理与评估“任务书第一阶段竞赛项目试题第二阶段竞赛项目试题任务 1 应急响应(40分)第三阶段竞赛项目试题2024四川省赛“信息安全管理与评估“任务书 第一阶段竞赛项目试题 先略 第二阶段竞赛…

DFS-蓝桥杯常用Python算法

DFS 蓝桥杯中的DFS主要有针对分配过程的DFS和图/树的DFS两种类型&#xff0c;基本是模板题&#xff0c;难度中等 类型一&#xff1a;针对分配过程的DFS 例题 1&#xff1a;飞机降落 题目描述&#xff1a; N 架飞机准备降落到某个只有一条跑道的机场。其中第 i 架飞机在 T …