当前位置: 首页 > article >正文

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.kler.cn/news/307062.html

相关文章:

  • .SUFFIXES:
  • openGemini 社区人才培养计划:助力成长,培养新一代云原生数据库人才
  • Redis面试题整理
  • 信息学奥赛:青少年编程的高光舞台,通向未来科技的敲门砖
  • 冒泡,选择,快速-排序
  • nestjs cache manager 很ioredis配合使用方案
  • Python Pyvis库创建交互式网络图 高级功能详解
  • 设计模式---中介者模式
  • 智能客服 | AI助理与内部知识库如何优化用户体验
  • 机器学习-深度学习数据集之打架斗殴识别数据集
  • Mysql InnoDB 存储引擎简介
  • Python 解析 JSON 数据
  • RabbitMQ高级篇,进阶内容
  • 【题解】AT_arc035_b [ARC035B] アットコーダー王国のコンテスト事情
  • 手势开关灯
  • 宿舍管理系统的设计与实现 (含源码+sql+视频导入教程)
  • 【Kubernetes】常见面试题汇总(十八)
  • git rev-parse
  • Nginx 文件名逻辑漏洞(CVE-2013-4547)
  • BM5 合并k个已排序的链表
  • 一、机器学习算法与实践_01基本概念与项目流程笔记
  • 一句话描述设计模式
  • 深入分析计算机网络性能指标
  • 无人机培训机构组装调试技术详解
  • 【我的 PWN 学习手札】Fastbin Double Free
  • 【系统分析师】-安全体系
  • 鸿蒙轻内核A核源码分析系列七 进程管理 (2)
  • 华为OD机试真题E卷-计算网络信号(含题目描述+解题思路+代码解析)
  • 记录一下gitlab社区版的安装教程
  • 通过TensorBoard查看服务器训练过程