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];
				})
			},
相关推荐
瑶琴AI前端2 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦10 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料17 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23417 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165022 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
小远yyds2 天前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app