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.hqwc.cn/news/701586.html

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

相关文章

喜大普奔!VMware Workstation Pro 17.5 官宣免费!

Broadcom 已经正式收购 VMware&#xff0c;【VMware中国】官方公众号已于3月11日更名为【VMware by Broadcom中国】。 13日傍晚&#xff0c;该公众号发表推文 V风拂面&#xff0c;好久不见 - 来自VMware 中国的问候 &#xff0c;意味着 VMware 带着惊喜和美好的愿景再次归来。 …

新书速览|MATLAB科技绘图与数据分析

提升你的数据洞察力&#xff0c;用于精确绘图和分析的高级MATLAB技术。 本书内容 《MATLAB科技绘图与数据分析》结合作者多年的数据分析与科研绘图经验&#xff0c;详细讲解MATLAB在科技图表制作与数据分析中的使用方法与技巧。全书分为3部分&#xff0c;共12章&#xff0c;第1…

IPSSL证书:为特定IP地址通信数据保驾护航

IPSSL证书&#xff0c;顾名思义&#xff0c;是专为特定IP地址设计的SSL证书。它不仅继承了传统SSL证书验证网站身份、加密数据传输的基本功能&#xff0c;还特别针对通过固定IP地址进行通信的场景提供了强化的安全保障。在IP地址直接绑定SSL证书的模式下&#xff0c;它能够确保…

分析 vs2019 cpp20 规范的 STL 库模板 function ,源码注释并探讨几个问题

&#xff08;1 探讨一&#xff09;第一个尝试弄清的问题是父类模板与子类模板的模板参数的对应关系&#xff0c;如下图&#xff1a; 我们要弄清的问题是创建 function 对象时&#xff0c;传递的模板参数 _Fty , 传递到其父类 _Func_class 中时 &#xff0c;父类的模板参数 _Ret…

k8s的整体架构及其内部工作原理,以及创建一个pod的原理

一、k8s整体架构 二、k8s的作用&#xff0c;为什么要用k8s&#xff0c;以及服务器的发展历程 1、服务器&#xff1a;缺点容易浪费资源&#xff0c;且每个服务器都要装系统&#xff0c;且扩展迁移成本高 2、虚拟机很好地解决了服务器浪费资源的缺点&#xff0c;且部署快&#x…

短视频语音合成:成都鼎茂宏升文化传媒公司

短视频语音合成&#xff1a;技术革新与创意融合的新篇章 随着科技的飞速发展&#xff0c;短视频已经成为人们生活中不可或缺的一部分。在这个快速变化的时代&#xff0c;短视频语音合成技术正逐渐崭露头角&#xff0c;以其独特的魅力和广泛的应用前景&#xff0c;吸引了众多创…

助力数字农林业发展服务香榧智慧种植,基于YOLOv5全系列【n/s/m/l/x】参数模型开发构建香榧种植场景下香榧果实检测识别系统

作为一个生在北方但在南方居住多年的人&#xff0c;居然头一次听过香榧&#xff08;fei&#xff09;这种作物&#xff0c;而且这个字还不会念&#xff0c;查了以后才知道读音&#xff08;fei&#xff09;&#xff0c;三声&#xff0c;这着实引起了我的好奇心&#xff0c;我相信…

【MARIE】嵌入式系统设计半期报告:MARIE模拟器的使用

1.模拟器介绍 1.1 体系结构 MARIE &#xff08;Machine Architecture that is Really Intuitive and Easy&#xff09; 是一种机器架构和汇编语言。发布者还为机器提供了一组用 Java 编写的模拟器程序。MARIE.js 是 MARIE 的 JavaScript 版本实现。它旨在尽可能忠实于原始 Ja…

java项目之教学辅助平台(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的教学辅助平台。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 教学辅助平台的主要使用者分…

flutter开发实战-compute将工作交由isolate处理

flutter开发实战-compute将工作交由isolate处理 最近查看flutter文档时候&#xff0c;看到了compute可以将工作交由isolate处理。通过 Flutter 提供的 compute() 方法将解析和转换的工作移交到一个后台 isolate 中。这个 compute() 函数可以在后台 isolate 中运行复杂的函数并…

第十一届蓝桥杯大赛软件类决赛 Java A 组

文章目录 发现宝藏【考生须知】试题 A: 合数个数试题 B : 含 2 天数试题 C: 本质上升序列试题 D: 迨尺天涯试题 E: 玩具蛇试题 F: 游园安排试题 G: 画廊试题 H: 奇偶覆盖试题 I: 补给试题 J: 蓝跳跳 发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&…

Spring Cloud系列—Spring Cloud Gateway服务网关的部署与使用指南

Gateway网关 文章目录 Gateway网关1. 网关基本简介1.1 什么是网关1.2 为什么需要网关&#xff1f; 2. 快速搭建gateway网关2.1 创建新模块2.2 引入依赖2.3 编写启动类2.4 配置路由规则2.5 测试 3. 路由过滤4. 过滤器4.1 简介4.2 网关过滤器4.2.2 种类 4.3 自定义过滤器4.3.1 自…