uniapp uni-table合并单元格

视图层

<uni-table border stripe emptyText="暂无更多数据" class="table_x">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">患者姓名</uni-th>
					<uni-th align="center">透析方式</uni-th>
					<uni-th align="center">选择</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in dataRowSpan" :key="index">
					<uni-td class="td_item" align="center" v-if="item.rowspan"
						:rowspan="item.rowspan">{{item.name}}</uni-td>
					<uni-td align="center">{{item.age}}</uni-td>
					<uni-td align="center">{{item.address}}</uni-td>
				</uni-tr>
			</uni-table>

数据和需要的变量

//合并行

dataRowSpan: [{
					name: 'AAA',
					age: 18,
					address: 'New York No. 1 Lake Park',
					id: "1",
					rowspan: 2
				},
				{
					name: 'AAA',
					age: 25,
					address: 'London No. 1 Lake Park',
					id: "2",
					rowspan: 0
				},
				{
					name: 'BBB',
					age: 30,
					address: 'Sydney No. 1 Lake Park',
					id: "3",
					rowspan: 1
				},
				{
					name: 'BBB',
					age: 26,
					address: 'Ottawa No. 2 Lake Park',
					id: "5",
					rowspan: 1
				},
				{
					name: 'C',
					age: 26,
					address: 'Ottawa No. 2 Lake Park',
					id: "6",
					rowspan: 2
				},
				{
					name: 'DD',
					age: 26,
					address: 'Ottawa No. 2 Lake Park',
					id: "11",
					rowspan: 2
				},
				{
					name: 'DD',
					age: 26,
					address: 'Ottawa No. 2 Lake Park',
					id: "111",
					rowspan: 0
				}
			],

			spanArr1: [],	// 存储序列
			pos1: 0			

JS 方法

handleData() {
				// this.dataRowSpan.forEach(item)
				this.spanArr1 = [];
				this.pos1 = 0;

				this.dataRowSpan.forEach((item, index) => {
					if (index == 0) {
						this.spanArr1.push(1);
						this.pos1 = 0;
					} else {
						if (item.name == this.dataRowSpan[index - 1].name) {
							this.spanArr1[this.pos1] += 1;
							this.spanArr1.push(0);
						} else {
							this.spanArr1.push(1);
							this.pos1 = index;
						}
					}
				});

				this.dataRowSpan.forEach((item, index) => {
					item.rowspan = this.spanArr1[index];
				})
			},


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

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

相关文章

【sgCreateCallAPIFunction】自定义小工具:敏捷开发→调用接口方法代码生成工具

<template><div :class"$options.name" class"sgDevTool"><sgHead /><div class"sg-container"><div class"sg-start"><div style"margin-bottom: 10px">调用接口方法定义列表</div…

五种数据库特性对比(Redis/Mysql/SQLite/ES/MongoDB)

做后端开发的程序员基本都要学会数据库的相关知识。 1、关系型数据 今天就着这段时间了解大模型的事需要牵扯到是我们接触最多的、也是入门后端必学的关系型数据库。在关系型数据库中&#xff0c;数据以表的形式进行组织和存储&#xff0c;每个表就像一个 Excel 表格&#xf…

superset 解决在 mac 电脑上发送 slack 通知的问题

参考文档: https://superset.apache.org/docs/configuration/alerts-reports/ 核心配置: FROM apache/superset:3.1.0USER rootRUN apt-get update && \apt-get install --no-install-recommends -y firefox-esrENV GECKODRIVER_VERSION0.29.0 RUN wget -q https://g…

Windows 常用的键盘快捷键总结

在日常工作或学习中&#xff0c;使用键盘快捷键不仅能够显著提高操作速度&#xff0c;还可以减少对鼠标的依赖&#xff0c;提升整体工作效率。Windows 操作系统为用户提供了众多功能强大的键盘快捷键&#xff0c;覆盖了不同方面&#xff0c;下面就给大家总结了常用的键盘快捷键…

工业互联网网络集成与实训系统解决方案

随着工业4.0时代的到来和信息技术的高速发展&#xff0c;工业互联网已成为推动产业升级的重要力量。本方案旨在通过构建高度仿真的实训环境&#xff0c;帮助学生全面掌握工业互联网技术&#xff0c;为未来的职业生涯奠定坚实基础。 一、设计理念 在设计理念上&#xff0c;本方…

如何在 Visual Studio Code 中反编译具有正确行号的 Java 类?

优质博文&#xff1a;IT-BLOG-CN 问题 我在 macOS 中使用 vscode 版本 1.92.2&#xff0c;并安装了Java 扩展包v0.29.0。当我打开command click或right click->Go to definition一个没有源代码的类时&#xff0c;vscode 会使用 FernFlower 反编译器打开 .class 文件。但…

【算法】滑动窗口—最小覆盖子串

题目 ”最小覆盖子串“问题&#xff0c;难度为Hard&#xff0c;题目如下&#xff1a; 给你两个字符串 S 和 T&#xff0c;请你在 S 中找到包含 T 中全部字母的最短子串。如果 S 中没有这样一个子串&#xff0c;则算法返回空串&#xff0c;如果存在这样一个子串&#xff0c;则可…

思通数科开源产品:免费的AI视频监控卫士安装指南

准备运行环境&#xff1a; 确保您的服务器或计算机安装了Ubuntu 18.04 LTS操作系统。 按照产品要求&#xff0c;安装以下软件&#xff1a; - Python 3.9 - Java JDK 1.8 - MySQL 5.5 - Redis 2.7 - Elasticsearch 8.14 - FFmpeg 4.1.1 - RabbitMQ 3.13.2 - Minio &#xff08;…

MySQL_表的基本操作

课 程 推 荐我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448;入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448;虚 拟 环 境 搭 建 &#xff1a;&#x1…

Java 入门指南:JVM(Java虚拟机)垃圾回收机制 —— 新一代垃圾回收器 ZGC 收集器

文章目录 垃圾回收机制垃圾收集器垃圾收集器分类ZGC 收集器ZGC 的性能优势复制算法指针染色读屏障 ZGC 的工作过程Stop-The-World 暂停阶段并发阶段 垃圾回收机制 垃圾回收&#xff08;Garbage Collection&#xff0c;GC&#xff09;&#xff0c;顾名思义就是释放垃圾占用的空…

2011年全国硕士研究生入学统一考试计算机科学与技术

1. 试卷背景&#xff1a; 试题&#xff1a;2011年全国硕士研究生入学统一考试计算机科学与技术学科联考中的计算机学科专业基础综合试题。难点&#xff1a;该问题的研究难点在于试题涵盖了计算机科学与技术的多个方面&#xff0c;包括数据结构、算法、计算机组成原理、操作系统…

直流无刷电机霍尔线序自学习解释

直流无刷电机霍尔线序自学习 步骤详解 1. 初始连接 连接电机的三相线&#xff1a;A、B、C。连接霍尔传感器线&#xff1a;HA、HB、HC。 2. 输入电压组合与霍尔信号记录 电机的电压输入组合和霍尔信号记录是电机控制系统中至关重要的一部分&#xff0c;它们决定了电机的运转…

图书馆座位预约系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;图书馆管理&#xff0c;座位信息管理&#xff0c;预约选座管理&#xff0c;签到信息管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;论坛&#xf…

「C++系列」异常处理

【人工智能教程】&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站&#xff1a;【人工智能教程】 文章目录 一、异常处理1. 基本概念2. 示例代码3. 注意事项 二、常见的异常类…

Linux进程间通信——探索共享内存—— 剖析原理, 学习接口应用

前言&#xff1a;本节内容主要讲解进程间通信的&#xff0c; systemV版本下的共享内存。 共享内存&#xff0c;顾名思义&#xff0c; 其实就是一块内存&#xff0c; 它不同于管道是一个文件。 所以它的传输速度是很快的。 因为管道是文件&#xff0c;有缓冲区&#xff0c; 而共…

【新手上路】衡石分析平台使用手册-租户管理

租户管理​ 衡石系统支持服务一个平台方和多个企业客户的租户模式&#xff0c;平台方管理租户&#xff0c;为租户提供数据&#xff0c;租户在系统内进行数据分析。 衡石系统增加工作空间的设计&#xff0c;在平台方和租户之间提供单向的传递通道&#xff0c;平台厂商可以轻松…

时序数据库 TDengine 的入门体验和操作记录

时序数据库 TDengine 的学习和使用经验 什么是 TDengine &#xff1f;什么是时序数据 &#xff1f;使用RPM安装包部署默认的网络端口 TDengine 使用TDengine 命令行&#xff08;CLI&#xff09;taosBenchmark服务器内存需求删库跑路测试 使用体验文档纠错 什么是 TDengine &…

C# 使用代码清理 以及禁用某个代码清理

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…

下载chromedriver驱动

首先进入关于ChromeDriver最新下载地址&#xff1a;Chrome for Testing availability 进入之后找到与自己所匹配的&#xff0c;在浏览器中查看版本号&#xff0c;下载版本号需要一致。 下载即可&#xff0c;解压&#xff0c;找到 直接放在pycharm下即可 因为在环境变量中早已配…

python3GUI--字符串加密方案(附源码)

文章目录 一&#xff0e;前言二&#xff0e;展示1.AES 加密1.介绍优点缺点2.代码3.结果 2.RSA 加密1.介绍优点缺点2.代码3.结果 3.基于 HMAC 的 URL 签名1.介绍优点缺点2.代码3.结果 4.JWT&#xff08;JSON Web Token&#xff09;加密1.介绍优点缺点2.安装3.代码4.结果 三&…