小程序内表格合并功能实现—行合并
功能介绍:支付宝小程序手写表格实现行内合并,依据动态数据自动计算每次需求合并的值,本次记录行内合并,如果列内合并,同理即可实现
前端技术:grid布局 display:grid
先看实现效果:
axml:
<view class="leasePlanView" style="padding-top:{{systemInfo.statusBarHeight + systemInfo.titleBarHeight + 15}}px"><view class="tableInfo por"><view class="head com_flex_between"><view a:for="{{ tableHead }}" class="item table-item com_font_26">{{item.title}}</view></view><view class="tableContent grid-container"><view a:for="{{ order_detail.billList }}" a:for-index="idx" class="grid-row"><view class="grid-cell com_flex_center">{{item.term}}</view><view class="grid-cell com_flex_center">内容</view><view class="grid-cell com_flex_center {{mergeInfo[idx].shouldMerge ? 'merge-cell-' + mergeInfo[idx].mergeRows : ''}} {{(!mergeInfo[idx].showNormal && !mergeInfo[idx].shouldMerge) ? 'hide-cell' : ''}}"><block a:if="{{mergeInfo[idx].showNormal}}"><view class="com_color_third">-</view></block><block a:elif="{{mergeInfo[idx].shouldMerge}}"><view class="com_flex_center_column com_font_20">我是合并数据</view></block></view><view class="grid-cell com_flex_center_column">内容</view></view></view></view>
</view>
js:
最重要的处理逻辑是processMergeData这个方法,根据实际需求可自行修改,只要是表格合并,处理逻辑都是相通的。
Page({data: {tableHead: [{title: '第一列'},{title: '第二列'},{title: '第三列'},{title: '第四列'}],mergeInfo: [], // 存储合并信息order_detail:{billList:[{term: '1',discountAmount: '',},{term: '2',discountAmount: '',},{term: '3',discountAmount: '100',},{term: '4',discountAmount: '100',},{term: '5',discountAmount: '200',},{term: '6',discountAmount: '200',},{term: '7',discountAmount: '300',},{term: '8',discountAmount: '300',},{term: '9',discountAmount: '300',},{term: '10',discountAmount: '',},{term: '11',discountAmount: '',},{term: '12',discountAmount: '',}]}},onLoad(query) {this.processMergeData();},// 处理合并数据processMergeData() {const { billList } = this.data.order_detail;const mergeInfo = [];// 遍历数据计算需要合并的行for (let i = 0; i < billList.length; i++) {const current = billList[i];if (current.discountAmount === null || !current.discountAmount) {// discountAmount 为 null 时正常显示mergeInfo[i] = {shouldMerge: false,mergeRows: 1,showNormal: true // 添加标记,表示需要正常显示};continue;}console.log(mergeInfo[i],'mergeInfo[i]mergeInfo[i]')// 如果当前行已经被标记为合并,跳过if (mergeInfo[i]) continue;let mergeCount = 1;// 向下查找相同 discountAmount 值的行for (let j = i + 1; j < billList.length; j++) {if (billList[j].discountAmount === current.discountAmount) {mergeCount++;// 标记被合并的行mergeInfo[j] = {shouldMerge: false,mergeRows: 0,showNormal: false};} else {break;}}// 标记合并起始行mergeInfo[i] = {shouldMerge: mergeCount > 1,mergeRows: mergeCount,showNormal: false};}console.log(mergeInfo,'mergeInfo')this.setData({ mergeInfo });}
});
css实现:
重点在grid布局和动态合并行数
.leasePlanView {width: 100%;min-height: 100vh;
}.bill_box{padding: 12rpx 16rpx 0;
}
.tableInfo {padding: 30rpx 16rpx;width: 710rpx;margin: -32rpx auto 0;background-color: white;border-radius: 20rpx;z-index: 2;
}.tableTitle {margin-bottom: 16rpx;padding: 0 14rpx;height: 32rpx;font-family: PingFangSC-Medium, PingFang SC;
}.tableInfo .head {background: rgba(255, 68, 36, 0.05);border-radius: 20rpx 20rpx 0rpx 0rpx;margin-top: 28rpx;border: 1rpx solid #E8E8E8;border-bottom: none;
}
.table-item{height: 85rpx;width: 169rpx;text-align: center;font-family: PingFangSC-Medium, PingFang SC;line-height: 85rpx;
}
.tableInfo .item {font-weight: 500;color: #000000;
}/* 表格边框实现 */
.tableContent{border: 1rpx solid #E8E8E8;display: grid;grid-template-columns: repeat(1, 1fr);
}
.border-bottom{border-bottom: 1rpx solid #E8E8E8;
}
.border-left{border-left: 1rpx solid #E8E8E8;
}
.grid-row:last-child .grid-cell{border-bottom: none;
}
.amount:first-child{border-left: none;
}.returnDate .bottom {font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #666666;line-height: 22rpx;margin-top: 4rpx;
}
.tableInfo .amount {font-weight: 400;flex: auto;position: relative;
}
.tableInfo .totalAmount{width: 169rpx;height: 85rpx;text-align: center;
}.grid-container {display: grid;grid-template-columns: repeat(4, 1fr);border: 1rpx solid #E8E8E8;
}.grid-row {display: contents;
}.grid-cell {padding: 10rpx;border-bottom: 1rpx solid #E8E8E8;border-left: 1rpx solid #E8E8E8;height: 85rpx;text-align: center;
}.grid-cell:first-child {border-left: none;
}/* 动态合并行数的样式 */
.merge-cell-2 {grid-row: span 2;height: 170rpx;
}.merge-cell-3 {grid-row: span 3;height: 255rpx;
}.merge-cell-4 {grid-row: span 4;height: 340rpx;
}.hide-cell {display: none;
}
相关文章:
小程序内表格合并功能实现—行合并
功能介绍:支付宝小程序手写表格实现行内合并,依据动态数据自动计算每次需求合并的值,本次记录行内合并,如果列内合并,同理即可实现 前端技术:grid布局 display:grid 先看实现效果: axml&…...
基于Flask的通用登录注册模块,并代理跳转到目标网址
实现了用户密码的加密,代理跳转到目标网址,不会暴露目标路径,未登录的情况下访问proxy则自动跳转到登录页,使用时需要修改配置项config,登录注册页面背景快速修改,可以实现登录注册模块的快速复用。 1.app…...
nlohmann::json教程
nlohmann::json 核心函数和方法 1. 基础构造与初始化 函数/方法描述示例json j;创建一个空的 JSON 对象(默认是 object 类型)json j;json::object()显式创建一个空的 JSON 对象json j json::object();json::array()显式创建一个空的 JSON 数组json ar…...
多层感知机从0开始实现
《动手学深度学习》-4.2-笔记 多层感知机在输出层和输入层之间增加一个或多个全连接隐藏层,并通过激活函数转换隐藏层的输出。 常用的激活函数包括ReLU函数、sigmoid函数和tanh函数。 import torch from torch import nn from d2l import torch as d2lbatch_size …...
在K8S中使用ArgoCD做持续部署
一、了解argocd ArgoCD是一个基于Kubernetes的GitOps持续交付工具,应用的部署和更新都可以在Git仓库上同步实现,并自带一个可视化界面。本文介绍如何使用GitArgocd方式来实现在k8s中部署和更新应用服务。关于ci这一块这里不多介绍。主要讲解argocd如何实…...
Python中数据结构元组详解
在Python中,元组(Tuple)是一种不可变的序列类型,常用于存储一组有序的数据。与列表(List)不同,元组一旦创建,其内容无法修改。本文将详细介绍元组的基本操作、常见运算、内置函数以及…...
23种设计模式-命令(Command)设计模式
命令设计模式 🚩什么是命令设计模式?🚩命令设计模式的特点🚩命令设计模式的结构🚩命令设计模式的优缺点🚩命令设计模式的Java实现🚩代码总结🚩总结 🚩什么是命令设计模式…...
计算机网络——数据链路层的功能
目录 物理链路 逻辑链路 封装成帧(组帧) 帧定界 透明传输 SDU 差错控制 可靠传输 流量控制 介质访问控制 主机需要实现第一层到第五层的功能,而路由器这种节点只需要实现第一层到第三层的这些功能 假设左边用户需要给右边用户发送…...
Axure项目实战:智慧城市APP(一)首页(动态面板、拖动效果)
亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢! 课程主题:智慧城市APP 主要内容:首页、政务公告、公交查询页面设计 应用场景:各类政务型、B端APP均可参考 案例展示:&am…...
Unity网络开发快速回顾
知识点来源:总结人间自有韬哥在, 唐老狮,豆包 目录 1.网络通信-通信必备知识-IP地址和端口类2.网络通信中序列化和反序列化2进制数据3.Socket类4.TCP同步服务端和客户端基础实现4.1.服务端基本实现4.2.客户端实现: 5.区分消息类型…...
鸿蒙学习笔记(1)-文件解读、编写程序、生命周期
一、文件解读 .hvigor:装有一些编译过程中的依赖缓存。 .idea:工具自动生成的,标记我们的工具是基于idea。 AppScope:代表着整个APP的配置,最后打包使用。之中的resources目录下是应用的名称和图片存放路径,其中app.json5: bund…...
多维动态规划 力扣hot100热门面试算法题 面试基础 核心思路 背题
多维动态规划 不同路径 https://leetcode.cn/problems/unique-paths/ 核心思路 比较简单 f[i][j] f[i - 1][j] f[i][j - 1] ; 示例代码 class Solution {public int uniquePaths(int n, int m) {int[][] f new int[n][m];for (int i 0; i < n; i)f[i][0] 1;for…...
C++ 多线程简要讲解
std::thread是 C11 标准库中用于多线程编程的核心类,提供线程的创建、管理和同步功能。下面我们一一讲解。 一.构造函数 官网的构造函数如下: 1.默认构造函数和线程创建 thread() noexcept; 作用:创建一个 std::thread 对象,但…...
乐仓VUE常用点
页面跳转 发送 router.push({ name: config.editRouteName, query: { type: create, from: route.name as string, }, }); router.push({ name: MbdCalScheme }); 接收 const route useRoute(); const type compu…...
单一主数据系统 vs. 统一主数据中心,哪种更优?
在企业中,主数据管理(MDM)已成为确保数据一致性和高效运营的关键。企业通常使用多个系统来处理业务数据,如ERP、CRM、SRM等。在这种多系统环境下,如何统一管理企业数据、避免数据孤岛,成为了一项重大挑战。…...
数据结构—树(java实现)
目录 一、树的基本概念1.树的术语2.常见的树结构 二、节点的定义三、有关树结构的操作1.按照数组构造平衡 二叉搜索树2.层序遍历树3.前、中、后序遍历树(1).前序遍历树(2).中序遍历树(3).后序遍历树(4).各种遍历的情况的效果对比 4.元素添加5.元素删除1.删除叶子节点2.删除单一…...
Modbus RTU ---> Modbus TCP透传技术实现(Modbus透传、RS485透传、RTU透传)分站代码实现、协议转换器
文章目录 Modbus RTU到Modbus TCP透传技术实现1. 透传技术概述1.1 透传基本原理- 协议帧格式转换- 地址映射与管理- 通信时序适配- 错误检测与处理 2. 透传网关硬件架构2.1 典型硬件结构- 微控制器/处理器(ARM、STM32等)- RS-485/RS-232收发器- 以太网控制器(如W5500)- 电源管理…...
Flask(三)路由与视图函数
在 Flask 中,路由 (Route) 是将 URL 地址映射到特定的视图函数 (View Function) 的机制。视图函数处理用户请求,并返回 HTTP 响应。理解路由和视图函数是构建 Flask 应用的基础。 3.1 路由的基本概念 Flask 使用 app.route() 装饰器来定义路由。以下是…...
mysql 磐维(opengauss)tidb误删数据之高级恢复
Mysql参考: Mysql 8.0 XtraBackupMysqlbinlog 完全恢复 - 墨天轮 Mysql 8.0 XtraBackupMysqlbinlog 完全恢复[TOC]# 一、安装mysql 8.0.19## 1.1https://www.modb.pro/db/509223MySQL 的全量备份、增量备份与 Binlog 时间点恢复_mysqlbinlog自动备份吗-CSDN博客文章…...
常见框架漏洞(一)----Thinkphp(TP)
Thinkphp框架介绍: ThinkPHP是为了简化企业级应⽤开发和敏捷WEB应⽤开发⽽诞⽣的,是⼀个快速、兼容⽽ 且简单的轻量级国产PHP开发框架,诞⽣于2006年初,原名FCS,2007年元旦正式更名为 ThinkPHP,遵循Apache…...
Git 使用指南:从设置用户信息到项目提交的全流程教程(持续更新)
一、设置 Git 用户信息 1.全局设置(适用于所有 Git 仓库): git config --global user.name "Your Name" git config --global user.email youexample.com 2.仅针对当前仓库设置(如果您只想为当前项目设置࿰…...
Json在扩展属性xdata中的应用实例——cad 二次开发c#
以下是一个使用AutoCAD C#.NET API实现你需求的示例代码,代码实现了提示用户选择一个实体,将一些字符串变量及其对应的值组成JSON格式数据存储到实体的扩展数据(XData)中,并在弹出窗口中显示该实体的所有扩展数据信息。…...
Unity Animation的其中一种运用方式
Animation是Unity的旧的动画系统,先说目的,其使用是为了在UI中播放动效,并且在动效播放结束后接自定义事件而设计的 设计的关键点在于,这个脚本不是通过Animation直接播放动画片段,而是通过修改AnimationState的nor…...
C++ 的基本内置类型(十二)
C 作为一门强大的编程语言,其内置类型是开发者必须掌握的基础。本文将详细介绍 C 的基本内置类型,包括算术类型和空类型,探讨它们的特性、尺寸以及在机器上的实现方式。 一、 基本内置类型概述 C 定义了一套基本数据类型,主要包…...
Android设计模式之单例模式
一、定义:确保一个类只有一个实例,并且自动实例化,并向整个系统提供这个实例。 二、使用场景:避免重复创建对象,过多消耗系统资源。 三、使用方式 3.1饿汉式:类加载时立即初始化,线程安全&…...
随笔(1)
1、解除切屏限制命令 document.body.onblur null2、vue3 getCurrentInstance import { getCurrentInstance } from vue const {proxy} getCurrentInstance() proxy.mittBus.emit(message,xxxx)3、 自定义双向绑定,modelValue 就是对应输入框的值 emit(update:mo…...
系统与网络安全------网络应用基础(3)
资料整理于网络资料、书本资料、AI,仅供个人学习参考。 路由器 认识路由器 负责在不同网络之间转发数据的设备 路由器决定到达目标的路径 路由器也为直连网络的主机充当”网关“角色 路由器是实现网络互连的最核心设备 工作原理 每台路由器维护一份路由表&…...
Java 基于微信小程序的开放实验室预约管理系统
博主介绍:✌Java徐师兄、7年大厂程序员经历。全网粉丝13w、csdn博客专家、掘金/华为云等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇🏻 不…...
Linux内核NIC网卡驱动实战案例分析
以下Linux 内核模块实现了一个虚拟网络设备驱动程序,其作用和意义如下: 1. 作用 (1)创建虚拟网络设备对 驱动程序动态创建了两个虚拟网络设备(nic_dev[0]和nic_dev[1]),模拟物理网卡的功能。这两…...
R 基础语法
R 基础语法 引言 R 是一种针对统计计算和图形表示而设计的编程语言和环境。它广泛应用于统计学、生物信息学、数据挖掘等领域。本文将为您介绍 R 语言的基础语法,帮助您快速上手。 R 的基本结构 R 语言的基本结构包括:变量、数据类型、运算符、控制结构、函数等。 变量 …...
JDK 24 发布,新特性解读!
一、版本演进与技术格局新动向 北京时间3月20日,Oracle正式发布Java SE 24。作为继Java 21之后的第三个非LTS版本,其技术革新力度远超预期——共集成24项JEP提案,相当于Java 22(12项)与Java 23(12项&#…...
在 Qt 中,不带参数或整形的参选的信号能够从 std::thread 发送成功,而带枚举离线的信号却发送失败
在 Qt 中,不带参数或整形的参选的信号能够从 std::thread 发送成功,而带枚举离线的信号却发送失败 当信号和槽在不同线程时,默认使用 队列连接(Qt::QueuedConnection),信号会被放入接收线程的事件队列&…...
慧通测控汽车智能座舱测试技术
一、引言 随着科技的飞速发展,汽车正从单纯的交通工具向智能化移动空间转变。智能座舱作为这一转变的核心体现,融合了多种先进技术,为用户带来前所未有的驾驶体验。从简单的信息娱乐系统到高度集成的人机交互、智能驾驶辅助以及车辆状态监测…...
【CSS】CSS 使用全教程
CSS 使用全教程 介绍 CSS(层叠样式表,Cascading Style Sheets)是一种样式表语言,用于描述 HTML 或 XML 文档的布局和外观,它允许开发者将文档的内容结构与样式表现分离,通过定义一系列的样式规则来控制网页…...
【Linux知识】RPM软件包安装命令行详细说明
文章目录 概述安装软件包升级软件包卸载软件包查询软件包信息验证软件包从软件包中提取文件注意事项 概述 rpm(Red Hat Package Manager)是红帽系 Linux 发行版(如 Red Hat、CentOS、Fedora 等)用于管理软件包的工具,…...
SpringBoot3.0不建议使用spring.factories,使用AutoConfiguration.imports新的自动配置方案
文章目录 一、写在前面二、使用imports文件1、使用2、示例比对3、完整示例 参考资料 一、写在前面 spring.factories是一个位于META-INF/目录下的配置文件,它基于Java的SPI(Service Provider Interface)机制的变种实现。 这个文件的主要功能是允许开发者声明接口的…...
c++项目-KV存储-模仿redis实现kv键值对存储的基本功能。
KV存储引擎的技术解析:数组、哈希与红黑树实现及其在网络I/O中的应用。 内容概要:本文档深入介绍了基于数组、哈希表和红黑树的键值存储引擎的设计与实现。文档首先阐述了系统的总体架构与类图关系,之后分别对底层存储结构进行了详细解释&am…...
docker ssh远程连接
目录 操作命令: 确保 SSH 配置允许 root 登录: docker提交: 操作命令: # 进入容器 docker exec -ti lbg04 /bin/bash# 更新包管理并安装 SSH 服务(Ubuntu/Debian 示例) apt-get update apt-get install…...
边缘计算场景下的分布式推理系统架构设计
一、边缘节点推理优化 1.1 模型轻量化技术矩阵 1.2 TensorRT加速配置示例 # 使用TensorRT优化YOLOv8builder trt.Builder(TRT_LOGGER)network builder.create_network()parser trt.OnnxParser(network, TRT_LOGGER)with open("yolov8s.onnx", "rb") a…...
css基础-浮动
一、浮动是什么? 比喻:就像泳池里的救生圈 原始用途:让文字环绕图片(像杂志排版)意外发展:被用来做页面布局(像用救生圈搭浮桥) 二、浮动怎么产生的? 场景还原&#…...
Linux TTY设备汇总
目录 1. tty(终端设备统称) 2. ptm(伪终端主设备)与pts(伪终端从设备) 3. ttys(串行端口终端) 4. ttyACM(USB CDC ACM设备) 5. ttyGS(USB Gadget Serial设备) 主要联系 典型应用场景 TTY_CORE: drivers/tty/tty_io.c:tty_register_driver…...
Android studio组合教程--做出一个类似于QQ的登录页面
之前我们学过了html与Android的开发,以及各种组件的学习,这次我们做一个完整向的登录页面,作为一次大作业。 注意 里面的一图片可以自由发挥,但要注意文件路径保持准确,这里给出参考路径: 背景路径&…...
iPhone 16 Plus :凉凉了
大屏就是生产力,这句话就像思想钢印一样,深入人心。 但苹果用户是个例外,根据内行人的爆料,iPhone 16 Plus 彻底凉凉了,难怪它会是最后一代Plus。 根据知名博主数码闲聊站透露,截止3 月 9 号,i…...
【MySQL报错】:Column count doesn’t match value count at row 1
MySQL报错:Column count doesn’t match value count at row 1 意思是存储的数据与数据库表的字段类型定义不相匹配. 由于类似 insert 语句中,前后列数不等造成的 主要有3个易错点: 要传入表中的字段数和values后面的值的个数不相等。 由于类…...
2025 polarctf春季个人挑战赛web方向wp
来个弹窗 先用最基础的xss弹窗试一下 <script>alert("xss")</script>没有内容,猜测过滤了script,双写绕过一下 <scrscriptipt>alert("xss")</scscriptript>background 查看网页源代码 查看一下js文件 类…...
Midscene.js自然语言驱动的网页自动化全指南
一、概述 网页自动化在数据抓取、UI 测试和业务流程优化中发挥着重要作用。然而,传统工具如 Selenium 和 Puppeteer 要求用户具备编程技能,编写复杂的选择器和脚本维护成本高昂。Midscene.js 通过自然语言接口革新了这一领域,用户只需描述任…...
PDF与Markdown的量子纠缠:一场由VLM导演的文档界奇幻秀
缘起:当格式界的"泰坦尼克号"撞上"黑客帝国" 某个月黑风高的夜晚,在"二进制酒吧"的霓虹灯下: PDF(西装革履地晃着威士忌): “我的每一页都像瑞士手表般精密,连华尔街的秃鹫都为我倾倒!” Markdown(穿着带洞的拖鞋): “得了吧老古董!…...
Spring Boot JSON序列化深度管控:忽略指定字段+Jackson扩展策略破解双向实体循环引用问题
一、JsonIgnore的核心原理与工作机制 1. 注解作用原理 JsonIgnore是Jackson库的核心注解之一,其工作原理基于 Jackson的AnnotationIntrospector机制。在序列化/反序列化过程中,Jackson会扫描Java对象的所有字段和方法上的注解。当检测到JsonIgnore时&a…...
msvcp140.dll是什么文件?修复丢失msvcp140.dll的方法指南
当计算机显示"msvcp140.dll未找到"的报错信息时,这实际反映了Windows系统运行机制中的一个关键环节出现断链。作为Microsoft Visual C可再发行组件包的核心动态链接库,msvcp140.dll承担着程序与系统资源之间的桥梁作用,特别是在处理…...
ES集群的部署
实验步骤 实验目的: 验证ES集群的容错性、扩展性数据分布与查询性能优化。 环境准备 1、准备两台服务器 服务器 1、10.1.1.20 cpu 2核 内存:4G 硬盘100G 2、10.1.1.21 cpu 2核 内存:4G 硬盘100G 2、修改两台静态ip 3、关闭防…...