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 动态刷新配置实现,不停服扩缩容。 注意事项: 请在进行缩容之前,务必了解实际的数据量,并确保磁盘有足够的空间来容纳这些数据。还需要考虑未来的使用需求,要预留一定数量的空间…

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

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

【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…

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…

kali linux2024.1版安装

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

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

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

转转小程序数据处理

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01;wx a15018601872&#xff0c;x30184483x…

BUU-[GXYCTF2019]Ping Ping Ping

考察点 命令执行 题目 解题 简单测试 ?ip应该是一个提示&#xff0c;那么就测试一下?ip127.0.0.1 http://0c02a46a-5ac2-45f5-99da-3d1b0b951307.node4.buuoj.cn:81/?ip127.0.0.1发现正常回显 列出文件 那么猜测一下可能会有命令执行漏洞&#xff0c;测试?ip127.0.…

dos命令改3389端口,通过dos命令更改3389端口的操作

要使用DOS命令更改3389端口&#xff0c;通常涉及修改Windows注册表中的相关键值。请注意&#xff0c;直接操作注册表具有一定的风险&#xff0c;因此在进行任何更改之前&#xff0c;请确保您了解正在进行的操作&#xff0c;并已经采取了适当的备份措施。 以下是一个基本的操作步…

记录一次接口优化的过程。接口响应时间从500s下降到5s。

记录一次接口优化的过程。接口响应时间从500s下降到5s。 接口说明&#xff1a; 该接口通过用户导入的一年内每天的厂区用电功率数据来计算用户安装储能设备后的收益情况。 用电功率数据具体为每15分钟一条&#xff0c;一年约有 12*30*24*4 34560 条。 代码循环情况为&…

详解GaussDB(DWS)中的行执行引擎

1.前言 GaussDB&#xff08;DWS&#xff09;包含三大引擎&#xff0c;一是SQL执行引擎&#xff0c;用来解析用户输入的SQL语句&#xff0c;生成执行计划&#xff0c;供执行引擎来执行&#xff1b;二是执行引擎&#xff0c;其中包含了行执行引擎和列执行引擎&#xff0c;执行引擎…

当时这样说就好了的笔记

系列文章目录 当时这样说就好了的笔记 文章目录 系列文章目录一、 不用好口才&#xff0c;怎么谈都讨喜的“说话金律”1、 掌握对方爱聊什么是交谈热络的第一步2、 装笨让对方当主角&#xff0c;和谁都能聊不停3、 “讲道理”谁都怕&#xff0c;坚持己见最伤感情4、 懂“聆听附…

Coursera吴恩达深度学习专项课程01: Neural Networks and Deep Learning 学习笔记 Week 04 (完结)

Neural Networks and Deep Learning Course Certificate 本文是学习 https://www.coursera.org/learn/neural-networks-deep-learning 这门课的笔记 Course Intro 文章目录 Neural Networks and Deep LearningWeek 04: Deep Neural NetworksLearning Objectives Deep L-layer…