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,
          };
        }
      }
    },

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

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

相关文章

【AcWing】蓝桥杯集训每日一题Day7|贡献法|4261.孤独的照片(C++)

4261.孤独的照片 AcWing 4261. 孤独的照片&#xff08;每日一题&#xff09; - AcWing难度&#xff1a;简单时/空限制&#xff1a;1s / 64MB总通过数&#xff1a;9889总尝试数&#xff1a;26088来源&#xff1a;USACO 2021 December Contest Bronze算法标签贡献法乘法原理 题目…

强烈推荐!13K star,一款Python开源自动化抢票神器!

马上就春节了&#xff0c;你抢到回家的票了吗&#xff1f; 别急&#xff0c;今天给大家推荐一款开源、功能强大且实用的12306抢票工具&#xff01; 1、介绍 该项目名为py12306&#xff0c;由 GitHub 用户 pjialin 创建和维护&#xff0c;用Python语言开发。 项目目前在GitHu…

【idea快捷键】idea开发java过程中常用的快捷键

含义win快捷键mac快捷键复制当前行或选定的代码块Ctrl DCommand D通过类名快速查找类Ctrl NCommand N通过文件名快速查找文件Ctrl Shift NCommand Shift N通过符号名称快速查找符号&#xff08;类、方法等&#xff09;Ctrl Alt Shift NCommand Shift O跳转到声明C…

精准定制:利用本地词库优化Jieba分词,提升景区评论数据LDA建模效果

引言&#xff1a; 在进行景区评论数据的LDA建模时&#xff0c;精确的分词是至关重要的。然而&#xff0c;通用的分词工具在处理特定领域的文本时可能表现不佳。针对这一挑战&#xff0c;本文探讨了如何利用本地词库&#xff0c;特别是搜狗词库中关于旅游领域的专业词汇&#x…

virtualbox 设置虚拟机 centos 网络

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

【vue】一个小bug和key的引入

点击master Vue!删除后该list后输入框中的Jerry消失了 原因&#xff1a;vue当你更改元素时会在真实的dom中渲染并更新list。这两个goal是两个dom元素,触发点击事件后,vue并不会删除第一个dom元素,而是把第二个dom元素的动态内容({{ goal }} - {{ index }})复制到第一个dom元素…

Python基础:标准库 -- math (数学函数)

1. 官方文档 math --- 数学函数 — Python 3.12.2 文档 cmath --- 关于复数的数学函数 — Python 3.12.2 文档 Python 中&#xff0c;可以使用内置的数学运算符&#xff0c;例如加法 ()、减法 (-)、除法 (/) 和乘法 (*) 进行简单的数学运算。不过&#xff0c;更高级的运算&a…

SpringCloud下的微服务应用技术(结尾篇)

六. Feign远程调用 6.1 替代RestTemplate RestTemplate调用问题&#xff1a;代码可读性差&#xff0c;参数复杂且URL难维护。 Feign是一个声明式的HTTP客户端&#xff0c;官方地址&#xff1a;GitHub - OpenFeign/feign: Feign makes writing java http clients easier 它可…

力扣热门算法题 128. 最长连续序列,134. 加油站,143. 重排链表

128. 最长连续序列&#xff0c;134. 加油站&#xff0c;143. 重排链表&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2024.03.26 可通过leetcode所有测试用例。 目录 128. 最长连续序列 解题思路 完整代码 Python Java 134. 加油…

Docker 部署 FRP 内网穿透 实现端口映射

Frp 是一个专注于内网穿透的高性能的反向代理应用&#xff0c;支持 TCP、UDP、HTTP、HTTPS 等多种协议&#xff0c;且支持 P2P 通信。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。 官网地址&#xff1a;https://github.com/fatedier/frp 准备工作…

VS2019连接MySQL

VS2019连接MySQL 下载MySQL Connector/C配置头文件&#xff0c;库文件路径配置头文件路径配置库的路径复制dll文件 MySQL的用户设置将权限赋值给新用户 编写代码往数据库写入 老师布置的作业让我们用VS2019连接MySQL实现一个小型的日志系统&#xff0c;中间踩了很多的坑&#x…

【3】3道链表力扣题:删除链表中的节点、反转链表、判断一个链表是否有环

3道链表力扣题 一、删除链表中的节点&#x1f30f; 题目链接&#x1f4d5; 示例&#x1f340; 分析&#x1f4bb; 代码 二、反转链表&#x1f30f; 题目链接&#x1f4d5; 示例&#x1f340; 分析① 递归② 迭代 三、判断一个链表是否有环&#x1f30f; 题目链接&#x1f4d5; …

文件操作(顺序读写篇)

1. 顺序读写函数一览 函数名功能适用于fgetc字符输入函数所有输入流fputc字符输出函数所有输出流fgets文本行输入函数所有输入流fputs文本行输出函数所有输出流fscanf格式化输入函数所有输入流fprintf格式化输出函数所有输出流fread二进制输入文件fwrite二进制输出文件 上面说…

FPGA----ZCU106的petalinux 2019.1使用USB传输数据

1、实际项目中需要用到开发板的串口进行数据交互&#xff0c;之前讲的几节只是启动了网口&#xff08;如下链接&#xff09;。因此&#xff0c;本次给大家带来的官方自带串口例程的使用方法&#xff0c;本文的vivado工程和下述连接一样&#xff0c;PL端什么配置都没有。 FPGA-…

A Simple Problem with Integers(线段树)

目录 描述 输入 输出 样例输入 样例输出 思路 建树 第一次错误解法&#xff08;正确解法在下面&#xff0c;可跳过这一步&#xff09; 正确解法 code 描述 You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. One type of …

云架构(二) 大使模式

Ambassador pattern &#xff08;https://learn.microsoft.com/en-us/azure/architecture/patterns/ambassador&#xff09; 简单描述 创建一个助手服务&#xff0c;这个服务代表消费服务或者应用程序发送网络请求。大使服务可以看做是与客户机同一个位置的进程外代理。 这种…

如何快速掌握数字化运维方法,构建数字化运维体系?

⛳️ 写在前面参与规则&#xff01;&#xff01;&#xff01; ✅参与方式&#xff1a;关注博主、点赞、收藏、评论&#xff0c;任意评论&#xff08;每人最多评论三次&#xff09; ⛳️本次送书1~4本【取决于阅读量&#xff0c;阅读量越多&#xff0c;送的越多】 主要内容读者…

简单实现企业微信远程打卡教程(永不迟到)

最近玩手游时刚好用到了手机模拟器&#xff0c;就是在电脑上安装一个手机模拟器&#xff0c;然后用电脑来挂机手机游戏 今天我突然有了一个想法&#xff0c;既然这个模拟器就是相当于一个虚拟的手机&#xff0c;那么是不是可以给它装上企业微信&#xff0c;然后让它帮我远程打卡…

vs_BuildTools.exe

Microsoft C Build Tools - Visual Studio vs_BuildTools.exe 安装无反应 无法进入安装界面。 转了一大圈&#xff1a; 最后决定更新系统&#xff0c;解决。 参考链接&#xff1a;执行了最后一步&#xff0c;更新系统&#xff1a; Fix: Faulting Application Path Error o…

详细了解RC4加密算法

一.什么是RC4加密算法 RC4加密算法是一种对称加密算法&#xff1a; 对称加密(也叫私钥加密)指加密和解密使用相同密钥的加密算法。有时又叫传统密码算法&#xff0c;就是加密密钥能够从解密密钥中推算出来&#xff0c;同时解密密钥也可以从加密密钥中推算出来。而在大多数的对…