uniapp uni-table合并单元格

__不靠谱先生2024-09-13 19:49

视图层

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];
				})
			},