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];
				})
			},
相关推荐
米粒宝的爸爸17 小时前
uniapp在app端,在导航栏设置自定义按钮
uni-app
dssxyz18 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
xw518 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !18 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
颜渊呐1 天前
uniapp中APPwebview与网页的双向通信
前端·uni-app
白杨木影子被拉长1 天前
多状态映射不同样式(scss语法)
vue.js·uni-app
一念杂记1 天前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
aklry1 天前
uniapp三步完成生成一维码图片
uni-app
雪芽蓝域zzs2 天前
uniapp 国密sm2加密
uni-app
打不着的大喇叭2 天前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app