iview(viewUI) span-method 表格实现将指定列的值相同的行合并单元格

news2024/11/29 10:53:02

效果图是上面这样的,将第一列的名字一样的合并在一起;

<template>
  <div class="table-wrap">
    <Table stripe :columns="columns" :data="data" :span-method="handleSpan"></Table>
  </div>
</template>

<script>
import * as _ from 'lodash'
export default {
  components: {},
  props: {},
  watch: {},
  data() {
    return {
      data: [],
      columns: [
        {
          title: '水质净化厂',
          key: 'factoryName',
          width: 300
        },
        {
          title: '污泥浓度',
          key: 'date'
        },
        {
          title: '污泥处理量',
          key: 'date'
        },
        {
          title: '污泥运输量',
          key: 'date'
        },
        {
          title: '离心污泥含水率',
          key: 'date'
        },
        {
          title: '板框污泥含水率',
          key: 'date'
        },
        {
          title: '干化污泥含水率',
          key: 'date'
        },
        {
          title: '产泥率',
          key: 'date'
        }
      ]
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      for (var i = 1; i < 6; ++i) {
        this.data.push({
          factoryName: '滨河水质净化厂'
        })
      }
      for (var i = 1; i < 4; ++i) {
        this.data.push({
          factoryName: '洪湖水质净化厂'
        })
      }
    },
    // row: 当前行 column: 当前列 rowIndex: 当前行索引 columnIndex: 当前列索引
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 只对 type 列进行处理
        const rowspan = this.getRowspan(row, rowIndex)
        if (rowspan >= 1) {
          return {
            rowspan,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    getRowspan(row, rowIndex) {
      const currentFactorMainNumber = row.factoryName
      let rowspan = 1 // 默认rowspan为1,也就是每个单元格只占一行
      // 如果当前行不是第一行,则先查看前一行,如果前一行的值(同列单元格)与当前行(同列单元格)相同,则将当前单元格与前一行合并(当前单元格占0行,rowspan=0)
      if (rowIndex > 0) {
        const previousRow = this.data[rowIndex - 1]
        const previousFactorMainNumber = previousRow.factoryName
        if (currentFactorMainNumber === previousFactorMainNumber) {
          return 0
        }
      }
      // 然后向查看,如果后面行(同列单元格)的值与当前行(同列单元格)相同,则每找到一行rowspan加1,直到找到与当前行(同列单元格)的值不同的行为止。(也就是说只能合并连续的行)
      for (let i = rowIndex + 1; i < this.data.length; i++) {
        const nextRow = this.data[i]
        const nextFactorMainNumber = nextRow.factoryName
        if (currentFactorMainNumber === nextFactorMainNumber) {
          rowspan++
        } else {
          break
        }
      }
      return rowspan
    }
  }
}
</script>

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

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

相关文章

Oracle 数据库

前言 今天开始学习 Oracle 数据库&#xff0c;这是实习公司要求的&#xff0c;虽然还没开始实习&#xff0c;但是事先熟练到岗之后就不需要再花费时间学习了。有了 MySQL 的基础&#xff0c;学习 Oracle 应该问题不大&#xff0c;不过 MySQL 一些进阶的内容依然需要再精进一下。…

搭建属于自己的AI知识库

前言 最近在看一本书《在线》&#xff0c;将所有数据都需要在线&#xff0c;才有生命力&#xff0c;那么我们的知识库也是。我们现在就可以用先进的大预言模型搭建属于自己的在线 AI 知识库&#xff0c;他就是 ChatGLM 智谱清言智能体。 它可以将自己的知识库与 ChatGLM 结合&…

锐捷EWEB网管系统RCE漏洞

文章目录 免责声明漏洞描述漏洞原理影响版本漏洞复现修复建议 免责声明 该文章只为学习和交流&#xff0c;请不要做违法乱纪的事情&#xff0c;如有与本人无关 漏洞描述 锐捷网管系统是由北京锐捷数据时代科技有限公司开发的新一代基于云的网络管理软件&#xff0c;以"…

保研机试之【二叉树序列化】

老规矩咯&#xff1a; 参考&#xff1a;东哥带你刷二叉树&#xff08;序列化篇&#xff09; | labuladong 的算法笔记 建议先过一遍&#xff1a;今天是二叉树~-CSDN博客&#xff0c;very重要&#xff01; 然后再过一遍&#xff08;理解怎么应用方法&#xff09;&#xff1a…

通义灵码企业版正式发布,满足企业私域知识检索、数据合规、统一管理等需求

5 月 9 日阿里云 AI 峰会&#xff0c;阿里云智能集团首席技术官周靖人宣布&#xff0c;通义灵码企业版正式发布&#xff0c;满足企业用户的定制化需求&#xff0c;帮助企业提升研发效率。 通义灵码是国内用户规模第一的智能编码助手&#xff0c;基于 SOTA 水准的通义千问代码模…

力扣32. 最长有效括号

Problem: 32. 最长有效括号 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.创建一个栈&#xff0c;并将-1先添加到栈中&#xff08;添加-1到栈中只是为了方便接下来的操作&#xff09;&#xff0c;定义int变量len用于记录每一个子有效括号的长度&#xff0c;ma…

logback日志持久化

1、问题描述 使用logback持久化记录日志。 2、我的代码 logback是Springboot框架里自带的&#xff0c;所以只要引入“spring-boot-starter”就行了。无需额外引入logback依赖。 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns&…

Python 中的 Lambda 函数:简单、快速、高效

大家好&#xff0c;今天再给大家介绍一个python的一个强大工具Lambda 函数&#xff0c;它允许你快速定义简单的匿名函数。这种函数是“匿名的”&#xff0c;因为它们不需要像常规函数那样被明确命名。 在本文中&#xff0c;我们将通过清晰的解释和实用的示例&#xff0c;深入了…

MFC窗口更新与重绘

窗口更新与重绘 窗口或控件更新其外观的情况通常包括以下几种&#xff1a; 窗口大小变化&#xff1a; 当用户调整窗口大小时&#xff0c;窗口的客户区大小会改变&#xff0c;需要重新绘制窗口内容以适应新的大小。 窗口重叠或暴露&#xff1a; 当窗口被其他窗口遮挡部分或完…

【Linux】Udp_Tcp协议

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;Linux 目录 &#x1f449;&#x1f3fb;再谈端口号pidof命令 &#x1f449;&#x1f3fb;UDP协议报文的管理基于UDP协议的应用层协议 &#x1f449;&#x1…

如何安全高效地进行分公司文件下发?

确保分公司文件下发过程中的保密性和安全性&#xff0c;是企业信息安全管理的重要组成部分。以下是一些关键步骤和最佳实践&#xff1a; 权限管理&#xff1a;确保只有授权的人员可以访问文件。使用权限管理系统来控制谁可以查看、编辑或下载文件。 加密传输&#xff1a;在文…

【数据结构与算法】力扣 111. 二叉树的最小深度

题目描述 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明&#xff1a; 叶子节点是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a; root [3,9,20,null,null,15,7] 输出&#xff1a; 2示例 2&#…

论文AI率:检测原理是什么?该如何降低论文AI率?

我是娜姐 迪娜学姐 &#xff0c;一个SCI医学期刊编辑&#xff0c;探索用AI工具提效论文写作和发表。 上一篇介绍了10个检测AI率的在线工具。本篇来说说AI率到底是如何检测出来的&#xff1f;该如何有效降低论文的AI率&#xff1f; 和AI大模型一样&#xff0c;AI检测的核心也是…

【数据结构与算法】递归

// 计算 1-100 累加 function add(a, b) {return a b ? a : add(a, b - 1) b }console.log(add(1, 100))// 计算阶乘 function factorial(n) {return n < 1 ? 1 : n * factorial(n - 1) }console.log(factorial(5)) // 120理论上所有递归都可以用循环实现。 注意防止栈…

电商技术揭秘营销相关系列文章合集(4)

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘相关系列文章合集&#xff08;3&#xff09; 文章目录 引言集合说明集合文章列表 引言 在数字化浪潮的推动下&#xff0c;电商行…

数据可视化第五天(读取文件获得男生女生身高信息,并且可视化在一个图像)

文件 需要学生文件的可以私信我 过程 利用numpy的loadtxt文件读取学号&#xff0c;性别&#xff0c;和身高。 import numpy as np import matplotlib.pyplot as pltfilename/Users/oommnn/Desktop/python学习/数据分析/网课资料/第04天/student-data.txtuser_infonp.dtype(…

哈希表Hash table

哈希表是根据关键码的值而直接进行访问的数据结构。 数组就是⼀张哈希表。 哈希表中关键码就是数组的索引下标&#xff0c;然后通过下标直接访问数组中的元素&#xff0c;如下图所示&#xff1a; 那么哈希表能解决什么问题呢&#xff0c;一般哈希表都是用来快速判断⼀个元素是…

车载测试:为什么你投十份简历,只有一两家公司约你?

最根本的原因&#xff0c;就是一方在汲汲渴求&#xff0c;而恰恰另一方呈现出的关键点让其怦然心动。求者心中有所想&#xff0c;而应者恰恰展现了求者所想的那一面。这就是个中奥妙。 程序员在找工作时&#xff0c;在一开始有三件事情会对能否获得面试机会至关重要&#xff1…

适合优化yaml文件编辑效果的.vimrc简单配置

yaml文件编辑最重要的就是缩进对齐&#xff08;一个tab键对应2个空格&#xff09;&#xff0c;最后加上添加横&#xff0c;纵线的效果 某xx.yaml文件或者xx.yml在vim编辑器中效果如图所示&#xff1a;&#xff1a; 简单的~/.vimrc文件配置内容&#xff1a; vim ~/.vimrc set…

【进程通信】了解信号以及信号的产生

文章目录 0.前言1.信号的基本概念1.1中断1.1.1 软中断1.1.2硬中断 1.2异步1.2.1异步和同步的比较 2.信号的主要用途3.信号的特点4.查看信号4.1Core和Term的区别4.2生成Core文件 5.初识捕捉信号5.1signal函数 6.产生信号的方式6.1.通过终端按键产生信号6.2.调用系统函数向进程发…