uniapp uni-table合并单元格

视图层

javascript 复制代码
<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>

数据和需要的变量

//合并行

javascript 复制代码
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 方法

javascript 复制代码
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];
				})
			},
相关推荐
ResponseState2001 小时前
安卓原生写uniapp插件手把手教学调试、打包、发布。
前端·uni-app
h_65432104 小时前
uniapp app端解析图片的经纬度、方位角
uni-app
h_65432104 小时前
uniapp app端获取指定路径下的所有图片
uni-app
雪芽蓝域zzs4 小时前
uniapp真机运行鸿蒙定位报getLocation:fail maybe not obtain GPS Permission
华为·uni-app·harmonyos
初遇你时动了情4 小时前
不用每个请求都写获取请求 类似无感刷新逻辑 uniapp vue3 react实现方案
javascript·react.js·uni-app
apollo_qwe21 小时前
解决移动端键盘遮挡痛点
uni-app
脾气有点小暴2 天前
scroll-view分页加载
前端·javascript·uni-app
脾气有点小暴2 天前
uniapp自定义头部导航
前端·uni-app
前端 贾公子2 天前
[uniapp][swtich开关]阻止切换状态(类似阻止事件冒泡)
uni-app
雪芽蓝域zzs2 天前
uniapp基于picker选择器实现年月日时分秒
uni-app