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

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

<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.factoryNamelet rowspan = 1 // 默认rowspan为1,也就是每个单元格只占一行// 如果当前行不是第一行,则先查看前一行,如果前一行的值(同列单元格)与当前行(同列单元格)相同,则将当前单元格与前一行合并(当前单元格占0行,rowspan=0)if (rowIndex > 0) {const previousRow = this.data[rowIndex - 1]const previousFactorMainNumber = previousRow.factoryNameif (currentFactorMainNumber === previousFactorMainNumber) {return 0}}// 然后向查看,如果后面行(同列单元格)的值与当前行(同列单元格)相同,则每找到一行rowspan加1,直到找到与当前行(同列单元格)的值不同的行为止。(也就是说只能合并连续的行)for (let i = rowIndex + 1; i < this.data.length; i++) {const nextRow = this.data[i]const nextFactorMainNumber = nextRow.factoryNameif (currentFactorMainNumber === nextFactorMainNumber) {rowspan++} else {break}}return rowspan}}
}
</script>

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

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

相关文章

HDFS- DataNode磁盘扩缩容

HDFS- DataNode磁盘扩缩容 背景: 缩减/增加节点磁盘 方案介绍: 采用hdfs dfsadmin -reconfig 动态刷新配置实现,不停服扩缩容。 注意事项: 请在进行缩容之前,务必了解实际的数据量,并确保磁盘有足够的空间来容纳这些数据。还需要考虑未来的使用需求,要预留一定数量的空间…

如何成为一个优秀的程序员

1 衡量一个程序员是否优秀&#xff0c;不是看程序员懂多少编程语言和编程技能&#xff0c;也不是看程序员做过多少项目&#xff0c;写过多少行代码&#xff0c;发表多少篇技术文章&#xff0c;甚至也不是看程序员的工作年限。 衡量程序员&#xff0c;第一看薪资&#xff0c;第…

java+vue3+iclientol实现警务地理信息系统实践

警务地理信息系统&#xff08;Police Geographic Information System, PGIS&#xff09;是一种专为警务工作设计的地理信息系统&#xff0c;它结合了地理信息技术、数据库技术、网络技术和现代警务理念&#xff0c;旨在提升公安机关的空间数据分析、决策支持、指挥调度、案件管…

SpringMVC的WebMvcConfigurer及返回

由于很久很久没有做过纯springmvc的代码了&#xff0c;好多东西都遗忘&#xff0c;最近接手了一个古早项目springmvc的。记录一下&#xff1a; 1、WebMvcConfigurer 是 Spring Framework 中的一个接口&#xff0c;它提供了一种扩展 Spring MVC 配置的方式。通过实现 WebMvcConf…

【QVariant类型剖析】

QVariant类型剖析 &#x1f31f; 官方文档中给出的定义&#x1f31f; 特性&#x1f338;QVariant实战应用&#x1f338;项目成果展示 &#x1f31f; 官方文档中给出的定义 &#x1f4d8;Because C forbids unions from including types that have non-default constructors or…

基于springboot+vue+Mysql的外卖点餐系统

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

【.NET Core】你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟

你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟 文章目录 你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟一、概述二、CallerMemberNameAttribute类三、CallerFilePathAttribute 类四、CallerLineNumberAttribute 类…

Android 简单的下拉选择框实现

要实现这种效果,目前知道的方法有以下两种,Spinner 和 ListPopupWindow,当然肯定还有很多别的方法,这里我们先尝试使用ListPopupWindow来实现这个效果; 以下是一个简单的demo: public class MainActivity extends AppCompatActivity {private List<String> dataList;pr…

三方库的调用方法

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言三方库的调用方法1. **下载并安装Boost库(三方库)**2. **配置开发环境**3. **包含Boost(三方库)头文件**4. **编写代码**5. **链接Boost库(三…

QueryPerformanceCounter实现高精度uS(微妙)延时

参考连接 C# 利用Kernel32的QueryPerformanceCounter封装的 高精度定时器Timer_kernel32.dll queryperformancecounter-CSDN博客https://blog.csdn.net/wuyuander/article/details/111831973 特此记录 anlog 2024年5月11日

ubuntu安装oceanbase调通本地navicat链接

分为两部分 一安装oceanbase服务 准备工作 mkdir -p /data/1 /data/log1 chown -R admin.admin /data/1 /data/log1/偷偷说&#xff1a;其实这步我忘记执行&#xff0c;也没影响我安装 oceanbase程序是很占内存的在安装时我们要先下载好安装包&#xff1a; 然后放在能记住的…

【C语言】/*操作符(上)*/

目录 一、算数操作符&#xff1a;、-、*、/、% 1.1 和 - 1.2 * 1.3 / 1.4 % 二、赋值操作符&#xff1a; 和符合赋值 2.1 连续赋值 2.2 复合赋值(自操作) 三、单目操作符&#xff1a;、--、(正号)、-(负号) 3.1 和 -- 3.1.1 前置 3.1.2 后置 3.1.3 前置-- …

稳定网络的诀窍:静态住宅代理解决方案

在数字化时代&#xff0c;网络稳定性对于个人和企业都至关重要。然而&#xff0c;由于多种因素的影响&#xff0c;如地理位置、网络拥堵或网络安全问题等&#xff0c;网络稳定性常常受到挑战。为了应对这些挑战&#xff0c;静态住宅代理作为一种高效且可靠的网络解决方案&#…

C++容器——list

目录 list容器 list容器使用流程 加入头文件 定义 list容器的使用 添加元素&#xff1a; 删除元素&#xff1a; 访问元素&#xff1a; 容器大小&#xff1a; 迭代器操作&#xff1a; 其他操作&#xff1a; list容器 功能&#xff1a;将数据进行链式存储 链表(list…

AWTK应用程序将资源放到 zip 文件中的方法

在支持文件系统的时候&#xff0c;AWTK 的资源缺省是以独立文件的形式放在指定目录里的。但在有的情况下&#xff0c;把全部资源文件放到一个 zip 文件中&#xff0c;是更好的或唯一的选择。比如&#xff1a; 开发 PC 应用程序。 在没有文件系统的情况下&#xff0c;把资源放到…

【软测学习笔记】Python 教程(1)

&#x1f31f;博主主页&#xff1a;我是一只海绵派大星 &#x1f4da;专栏分类&#xff1a;软件测试笔记 &#x1f4da;参考教程&#xff1a;菜鸟教程❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、Python 简介 二、Python发展历史 三、Python 特点 四、 Python 环…

kali linux2024.1版安装

1 基于 VMware 安装 Kali 系统 打开已经安装好的 VMware 程序&#xff0c;点击选项卡中的“主页”--》而后点击“创建新的虚拟机” 选择“典型(推荐)”&#xff0c;并点击“下一步” 客户机操作系统镜像选择&#xff1a;选择“稍后安装操作系统”&#xff0c;并点击“下一步”…

《中阿科技论坛(中英文)》是什么级别的期刊?是正规期刊吗?

问题解答 问&#xff1a;《中阿科技论坛&#xff08;中英文&#xff09;》是核心期刊吗&#xff1f; 答&#xff1a;不是&#xff0c;但是正规期刊 问&#xff1a;《中阿科技论坛&#xff08;中英文&#xff09;》是什么级别期刊&#xff1f; 答&#xff1a;省级 主管单位…

多线程的情况下 AopContext.currentProxy()切面代理失效问题

多线程的情况下 AopContext.currentProxy()切面代理失效问题 在多线程环境下&#xff0c;AopContext.currentProxy() 可能会遇到问题&#xff0c;特别是在某些情况下&#xff0c;它无法正确地获取到当前线程的代理对象。这通常发生在以下几种情况&#xff1a; 线程不是由Spri…

深度神经网络详解

深度神经网络&#xff08;Deep Neural Network&#xff0c;DNN&#xff09;是机器学习领域中一种重要的人工神经网络。它主要由多层结构组成&#xff0c;通常包括输入层、隐藏层和输出层&#xff0c;每层之间通过权重进行连接。这些权重在训练过程中通过学习来调整&#xff0c;…