uniapp uni-table合并单元格

news/2024/9/18 12:30:46/ 标签: uni-app

视图层

<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.ppmy.cn/news/1525096.html

相关文章

常用设计模式的通俗解释和c语言实现

单例模式 单例模式确保一个类只有一个实例,并提供一个全局访问点。 通俗解释:想象一个公司只能有一个CEO。无论你如何尝试创建新的CEO,你总是会得到同一个人。 #include <stdio.h> #include <stdlib.h>typedef struct {int data; } Singleton;static Singleton* i…

设计模式 23 访问者模式

设计模式 23 创建型模式&#xff08;5&#xff09;&#xff1a;工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式结构型模式&#xff08;7&#xff09;&#xff1a;适配器模式、桥接模式、组合模式、装饰者模式、外观模式、享元模式、代理模式行为型模式&#xff…

Vue3+TS项目给el-button统一封装一个点击后转圈效果的钩子函数按钮防抖

前言 每个按钮都要单独定义一个loading变量&#xff0c;并且在接口请求前修改为true&#xff0c;接口响应后再修改为false&#xff0c;封装后这段重复的逻辑就可以统一管理不用每次都写一遍了。 效果 新建一个公共的src\common.ts import { ref } from "vue"expor…

【有啥问啥】探索扫地机器人中的 SLAM 算法:原理、实现与未来展望

探索扫地机器人中的 SLAM 算法&#xff1a;原理、实现与未来展望 随着智能家居的普及&#xff0c;扫地机器人逐渐成为日常生活中的常见家电。其自主导航能力使得它能够在复杂的家庭环境中高效完成清洁任务&#xff0c;而这背后的核心技术之一就是 SLAM&#xff08;Simultaneou…

git的快速合并fast-forward merge详解

文章目录 1. 什么是快进合并&#xff1f;2. 快进合并的前提条件3. 快进合并的工作原理3.1 示例场景&#xff1a;3.2 使用命令&#xff1a;3.3 快进合并的视觉效果&#xff1a; 4. 快进合并的优点5. 快进合并的缺点6. 快进合并 vs 非快进合并6.1 非快进合并&#xff1a;6.2 非快…

【Linux】ps -ef 与 ps aux 的区别及 “|” “grep” 的详解

前言&#xff1a;虽然 ps -ef 与 ps aux 命令都能查看进程运行情况&#xff0c;但两者之间还是有一些细致区别。 一、格式与输出 1、ps -ef/ps -Af&#xff1a; -e是显示所有进程&#xff0c;包括其他用户的进程。-A属于-e别名&#xff0c;功能相同。 -f &#xff1a;显示更…

Android TextView 学习备忘

1.android:gravity 与 android:layout_gravity&#xff1a; Android TextView文本位置_mob649e8166858d的技术博客_51CTO博客https://blog.51cto.com/u_16175509/8597723 2.设置字体样式&#xff1a; android:fontFamily"font/my_custom_font"android:textStyle&qu…

Android SystemUI组件(05)状态栏-系统状态图标显示管理

该系列文章总纲链接&#xff1a;专题分纲目录 Android SystemUI组件 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节持续迭代之前章节的思维导图&#xff0c;主要关注下方 SystemBars分析中状态栏中的部分-系统状态图标显示&管理 即可。 1 系统状态图标显…

SenseGlove机器臂遥操作控制:技术优势与高危作业安全保障

在追求高效与安全的工业时代&#xff0c;高危作业任务始终是行业发展的一大障碍。SenseGlove力反馈手套机器臂遥操作应用案例的出现&#xff0c;凭借其独特的技术优势&#xff0c;为解决这一难题提供了创新性解决方案。 一、技术优势 高精度的力反馈技术&#xff1a;SenseGlove…

CTF——简单的《WEB》

文章目录 一、WEB1、easysql2、baby_web3、baby_sql4、upload_easy5、easygame拓展1.1拓展1.2 6、ht_ssti7、包容乃大 一、WEB 1、easysql 题目描述&#xff1a; sql注入漏洞 1.常用的sql注入测试语句 2.sql注入bypass 解题思路 这边提示基本给的也很完整的&#xff0c;不…

基于中心点的目标检测方法CenterNet—CVPR2019

Anchor Free目标检测算法—CenterNet Objects as Points论文解析 Anchor Free和Anchor Base方法的区别在于是否在检测的过程中生成大量的先验框。CenterNet直接预测物体的中心点的位置坐标。 CenterNet本质上类似于一种关键点的识别。识别的是物体的中心点位置。 有了中心点之…

关于Python爬虫的基础知识

爬虫是一种自动获取网页内容的程序或工具。以下是一些关于爬虫的基础知识&#xff1a; 一、爬虫的工作原理 发送请求&#xff1a; 爬虫首先向目标网站发送 HTTP 请求&#xff0c;就像你在浏览器中输入网址并访问一样。请求中包含了一些信息&#xff0c;如请求方法&#xff08;…

Spring Boot集成Akka Stream快速入门Demo

1.什么是Akka Stream&#xff1f; Akka Streams是一个用于处理和传输元素序列的库。它建立在Akka Actors之上&#xff0c;使流的摄入和处理变得简单。由于它是建立在Akka Actors之上的&#xff0c;它为Akka现有的actor模型提供了一个更高层次的抽象。Akka流由3个主要部分组成-…

Linux平台屏幕|摄像头采集并实现RTMP推送两种技术方案探究

技术背景 随着国产化操作系统的推进&#xff0c;市场对国产化操作系统下的生态构建&#xff0c;需求越来越迫切&#xff0c;特别是音视频这块&#xff0c;今天我们讨论的是如何在linux平台实现屏幕|摄像头采集&#xff0c;并推送至RTMP服务。 我们知道&#xff0c;Linux平台&…

洛谷刷题之B2089 数组逆序重存放

数组逆序重存放 题目入口 题目描述 将一个数组中的值按逆序重新存放。例如&#xff0c;原来的顺序为 8 , 6 , 5 , 4 , 1 8,6,5,4,1 8,6,5,4,1。要求改为 1 , 4 , 5 , 6 , 8 1,4,5,6,8 1,4,5,6,8。 输入格式 输入为两行&#xff1a;第一行数组中元素的个数 n n n&#x…

比 GPT-4 便宜 187 倍的Mistral 7B (非广告)

Mistral 7B 是一种设计用来快速处理较长文本的人工智能模型。它采用了一些特别的技术来提高速度和效率&#xff0c;比如“分组查询注意力&#xff08;grouped-query attention&#xff09;”和“滑动窗口注意力&#xff08;sliding-window attention&#xff09;”。 这些技术…

UNI-APP 富文本编辑器,可以对图片、文字格式进行编辑和混排。

✍找了几篇文章对比了一下&#xff0c;大体都差不多各有各的说辞和见解,但是没有提供/style/editor-icon.css文件&#xff0c;找起来虽然说不算太麻烦&#xff0c;但是不够直接&#xff0c;又要花费时间去弄&#xff0c;虽然用的不是很多但是&#xff0c;我还是决定自己写一篇&…

第15-05章:获取运行时类的完整结构

我的后端学习大纲 我的Java学习大纲 6.1.第一组方法API: 1.API列表&#xff1a;java.lang.Class 类&#xff1a; 2.代码测试&#xff1a; public class ReflectionUtils{ puvblic static void main(String[] args){}// 第一组Testpublic void api_01{//上面截图的代码......…

VR 尺寸美学主观评价-解决方案-现场体验研讨会报名

棣拓科技VR创新解决方案助力尺寸美学所见即所得! 诚邀各位行业专家莅临指导交流 请扫描海报二维码踊跃报名&#xff0c;谢谢 中国上海 2024.10.25 亮点介绍 1、通过精湛渲染技术&#xff0c;最真实展现设计效果&#xff0c;并通过VR设备一比一比例进行展现。 2、设置相关设…

基于ACMEv2协议的免费证书申请

项目&#xff1a;https://github.com/cook-code-jazor/acmex 非开源&#xff0c;使用webui管理证书的申请&#xff0c;所有文件本地化存储&#xff0c;支持windows/linux/osx. 运行 很简单,直接运行命令 ./acmex --runas console首次运行没有配置文件&#xff0c;会要求你填…