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