vue.js 实现表格合并
正常表格： {{ $index + 1 }} {{item.bsO_Name}} {{item.GathDt | time}} {{item.F1}} {{item.F2}} {{item.F4}} {{item.F3}}合并修改代码: {{ $index + 1 }} {{item.bsO_Name}}
·
正常表格：
<td>{{ $index + 1 }}</td>
<td>{{item.bsO_Name}}</td>
<td >{{item.GathDt | time}}</td>
<td>{{item.F1}}</td>
<td >{{item.F2}}</td>
<td >{{item.F4}}</td>
<td >{{item.F3}}</td>
</tr>
合并修改代码:
<tr v-for="item in items">
<td>{{ $index + 1 }}</td>
<td :rowspan="item.bsO_Namespan" :class="{hidden: item.bsO_Namedis}">{{item.bsO_Name}}</td>
<td :rowspan="item.GathDtspan" :class="{hidden: item.GathDtdis}" >{{item.GathDt | time}}</td>
<td :rowspan="item.F1span" :class="{hidden: item.F1dis}">{{item.F1}}</td>
<td :rowspan="item.F2span" :class="{hidden: item.F2dis}">{{item.F2}}</td>
<td :rowspan="item.F3span" :class="{hidden: item.F3dis}">{{item.F3}}</td>
</tr>
合并：
list：请求回来的数据
combineCell:function (list) {
for (field in list[0]) {
var k = 0;
while (k < list.length) {
list[k][field + 'span'] = 1;
list[k][field + 'dis'] = false;
for (var i = k + 1; i <= list.length - 1; i++) {
if (list[k][field] == list[i][field] && list[k][field] != '') {
list[k][field + 'span']++;
list[k][field + 'dis'] = false;
list[i][field + 'span'] = 1;
list[i][field + 'dis'] = true;
} else {
break;
}
}
k = i;
}
}
return list;
}
for (field in list[0]) {
var k = 0;
while (k < list.length) {
list[k][field + 'span'] = 1;
list[k][field + 'dis'] = false;
for (var i = k + 1; i <= list.length - 1; i++) {
if (list[k][field] == list[i][field] && list[k][field] != '') {
list[k][field + 'span']++;
list[k][field + 'dis'] = false;
list[i][field + 'span'] = 1;
list[i][field + 'dis'] = true;
} else {
break;
}
}
k = i;
}
}
return list;
}
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)