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

原文地址：https://blog.csdn.net/weixin_43871703/article/details/142170379

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！