小程序内表格合并功能实现—行合并

news2025/3/31 16:33:19

功能介绍:支付宝小程序手写表格实现行内合并,依据动态数据自动计算每次需求合并的值,本次记录行内合并,如果列内合并,同理即可实现

前端技术: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;
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SSE协议介绍和python实现

概述&#xff1a; SSE&#xff08;Server-Sent Events&#xff09;协议是一种允许服务器向客户端实时推送更新的技术&#xff0c;基于HTTP协议&#xff0c;常用于实时数据推送特点&#xff1a; 单向通信&#xff1a;服务器向客户端推送数据&#xff0c;客户端无法发送数据。基…

甘肃旅游服务平台+论文源码视频演示

4 系统设计 4.1系统概要设计 甘肃旅游服务平台并没有使用C/S结构&#xff0c;而是基于网络浏览器的方式去访问服务器&#xff0c;进而获取需要的数据信息&#xff0c;这种依靠浏览器进行数据访问的模式就是现在用得比较广泛的适用于广域网并且没有网速限制要求的小程序结构&am…

WebRTC中音视频服务质量QoS之FEC+NACK调用流程

WebRTC中音视频服务质量QoS之FECNACK调用流程 WebRTC中音视频服务质量QoS之FECNACK调用流程 WebRTC中音视频服务质量QoS之FECNACK调用流程前言一、WebRTC中FEC基础原理1. FEC基础操作 异或操作XOR2、 FEC中 行向和纵向 计算3、 WebRTC中 媒体包分组和生成FEC的包数① kFecRateT…

神经网络知识点整理

目录 ​一、深度学习基础与流程 二、神经网络基础组件 三、卷积神经网络&#xff08;CNN&#xff09;​编辑 四、循环神经网络&#xff08;RNN&#xff09;与LSTM 五、优化技巧与调参 六、应用场景与前沿​编辑 七、总结与展望​编辑 一、深度学习基础与流程 机器学习流…

远程办公新体验:用触屏手机流畅操作电脑桌面

在数字化浪潮的推动下&#xff0c;远程办公已从“应急选项”转变为职场常态。无论是居家隔离、差旅途中&#xff0c;还是咖啡厅临时办公&#xff0c;高效连接公司电脑的需求从未如此迫切。然而&#xff0c;传统的远程控制软件常因操作复杂、画面卡顿或功能限制而影响效率。如今…

【面试八股】:常见的锁策略

常见的锁策略 synchronized &#xff08;标准库的锁不够你用了&#xff09;锁策略和 Java 不强相关&#xff0c;其他语言涉及到锁&#xff0c;也有这样的锁策略。 1. 悲观锁&#xff0c;乐观锁&#xff08;描述的加锁时遇到的场景&#xff09; 悲观锁&#xff1a;预测接下来…

【python】OpenCV—Hand Detection

文章目录 1、功能描述2、代码实现3、效果展示4、完整代码5、参考6、其它手部检测和手势识别的方案 更多有趣的代码示例&#xff0c;可参考【Programming】 1、功能描述 基于 opencv-python 和 mediapipe 进行手部检测 2、代码实现 导入必要的库函数 import cv2 import media…

Flink中聚合算子介绍

前言 在flink api中&#xff0c;聚合算子是非常常用的。所谓的聚合就是在分组的基础上做比较计算的操作。下面通过几个简单案例来说明聚合算子的用法和注意事项。 聚合算子案例 因为flink的api操作流程比较固定&#xff0c;从获取执行环境》获取数据源》执行数据转换操作》输…

【基础】Windows 中通过 VSCode 使用 GCC 编译调试 C++

准备 安装 VSCode 及 C 插件。通过 MSYS2 安装 MinGW-w64 工具链&#xff0c;为您提供必要的工具来编译代码、调试代码并配置它以使用IntelliSense。参考&#xff1a;Windows 中的 Linux 开发工具链 验证安装&#xff1a; gcc --version g --version gdb --version三个核心配…

知识就是力量——物联网应用技术

基础知识篇 一、常用电子元器件1——USB Type C 接口引脚详解特点接口定义作用主从设备关于6P引脚的简介 2——常用通信芯片CH343P概述特点引脚定义 CH340概述特点封装 3——蜂鸣器概述类型驱动电路原文链接 二、常用封装介绍贴片电阻电容封装介绍封装尺寸与功率关系&#xff1…

(windows)conda虚拟环境下open-webui安装与启动

一、创建conda环境 重点强调下&#xff0c;如果用python pip安装&#xff0c;一定要选择python3.11系列版本&#xff0c;我选的3.11.9。 如果你的版本不是这个系列&#xff0c;将会出现一些未知的问题。 conda create -n open-webui python3.11 -y如下就创建好了 二、安装o…

资本运营:基于Python实现的资本运作模拟

基于Python实现的一个简单的资本运营框架&#xff1b; ​企业生命周期演示&#xff1a;观察初创→成长→上市→并购全流程 ​行业对比分析&#xff1a;不同行业的财务特征和估值差异 ​资本运作策略&#xff1a;体验IPO定价、投资决策、并购整合等操作 ​市场动态观察&#xff…

当EFISH-SBC-RK3576遇上区块链:物联网安全与可信数据网络‌

在工业物联网场景中&#xff0c;设备身份伪造与数据篡改是核心安全隐患。‌EFISH-SBC-RK3576‌ 通过 ‌硬件安全模块 区块链链上验证‌&#xff0c;实现设备身份可信锚定与数据全生命周期加密&#xff0c;安全性能提升10倍以上。 1. 安全架构&#xff1a;从芯片到链的端到端防…

分布式系统面试总结:3、分布式锁(和本地锁的区别、特点、常见实现方案)

仅供自学回顾使用&#xff0c;请支持javaGuide原版书籍。 本篇文章涉及到的分布式锁&#xff0c;在本人其他文章中也有涉及。 《JUC&#xff1a;三、两阶段终止模式、死锁的jconsole检测、乐观锁&#xff08;版本号机制CAS实现&#xff09;悲观锁》&#xff1a;https://blog.…

【VSCode的安装与配置】

目录&#xff1a; 一&#xff1a;下载 VSCode二&#xff1a;安装 VSCode三&#xff1a;配置 VSCode 一&#xff1a;下载 VSCode 下载地址&#xff1a;https://code.visualstudio.com/download 下载完成之后&#xff0c;在对应的下载目录中可以看到安装程序。 二&#xff1a;安装…

脱围机制-react18废除forwardRef->react19直接使用ref的理解

采用ref&#xff0c;可以在父组件调用到子组件的功能 第一步&#xff1a;在父组件声明ref并传递ref interface SideOptsHandle {refreshData: () > Promise<void> }const sideOptsRef useRef<SideOptsHandle>(null) // 创建 ref<SideOpts ref{sideOptsRef…

Windows中安装git工具

下载好git安装包 点击next 选择安装目录 根据需要去勾选 点击next 点击next PATH环境选择第二个【Git...software】即可&#xff0c;再点击【Next】。 第一种配置是“仅从Git Bash使用Git”。这是最安全的选择&#xff0c;因为您的PATH根本不会被修改。您只能使用 Git Bash 的…

【CSS】CSS 使用全教程

CSS 使用全教程 介绍 CSS&#xff08;层叠样式表&#xff0c;Cascading Style Sheets&#xff09;是一种样式表语言&#xff0c;用于描述 HTML 或 XML 文档的布局和外观&#xff0c;它允许开发者将文档的内容结构与样式表现分离&#xff0c;通过定义一系列的样式规则来控制网页…

全分辨率免ROOT懒人精灵-自动化编程思维-设计思路-实战训练

全分辨率免ROOT懒人精灵-自动化编程思维-设计思路-实战训练 1.2025新版懒人精灵-实战红果搜索关键词刷视频&#xff1a;https://www.bilibili.com/video/BV1eK9kY7EWV 2.懒人精灵-全分辨率节点识别&#xff08;红果看广告领金币小实战&#xff09;&#xff1a;https://www.bili…

如何在IDEA中借助深度思考模型 QwQ 提高编码效率?

通义灵码上新模型选择功能&#xff0c;不仅引入了 DeepSeek 满血版 V3 和 R1 这两大 “新星”&#xff0c;Qwen2.5-Max 和 QWQ 也强势登场&#xff0c;正式加入通义灵码的 “豪华阵容”。开发者只需在通义灵码智能问答窗口的输入框中&#xff0c;单击模型选择的下拉菜单&#x…