Vue.js 根据数据，进行Table单元格合并
ITKouSyou -10-16 14:29:40 3493 收藏 2
展开
表格代码
<table cellspacing="0" cellpadding="0" border="0" style="height: auto; width: 100%">
<thead>
<tr>
<th>项目</th>
<th>类型</th>
<th>值</th>
</tr>
</thead>
<tbody>
<tr v-for="item in showList">
<td :rowspan="item.keycount" v-if="item.keyshow">{{ item.key }}</td>
<td :rowspan="item.keyDesccount" v-if="item.keyDescshow">{{ item.keyDesc}}</td>
<td :rowspan="item.valuecount" v-if="item.valueshow">{{ item.value}}</td>
</tr>
</tbody>
</table>
开始使用了css的display和hidden标签去尝试，但是没有生效，所以就是用v-if来决定是否生成td
需要显示的list需要先通过下面的js方法进行处理，生成每个参数的对应count和show，count决定合并的个数，show则决定是否显示。当count为1时，说明相同的只有一个，所以show就是true，count大于2时show则为false。
/**
*
* @param list 要处理的list
* @returns 返回处理好的list
*/
listHandle(list) {
for (var key in list[0]) {
var k = 0;
while (k < list.length) {
list[k][key + 'count'] = 1;
list[k][key + 'show'] = true;
for (var i = k + 1; i <= list.length - 1; i++) {
if (list[k][key] == list[i][key] && list[k][key] != '') {
list[k][key + 'count']++;
list[k][key + 'show'] = true;
list[i][key + 'count'] = 1;
list[i][key + 'show'] = false;
} else {
break;
}
}
k = i;
}
}
return list
}
list数据举例
[
{
"key":"异地使用情况",
"keyDesc":"最近常用通话地",
"value":"淮北"
},
{
"key":"异地使用情况",
"keyDesc":"手机入网地",
"value":"浙江杭州"
},
{
"key":"互通号码情况",
"keyDesc":"互通电话号码个数",
"value":"6"
},
{
"key":"互通号码情况",
"keyDesc":"互通电话号码占比",
"value":"21"
},
{
"key":"主被叫通话详情",
"keyDesc":"主叫通话时长",
"value":"17124"
},
{
"key":"主被叫通话详情",
"keyDesc":"被叫通话时长",
"value":"10800"
},
{
"key":"主被叫通话详情",
"keyDesc":"主叫被叫比例",
"value":"158.56%"
},
{
"key":"静默情况",
"keyDesc":"最长连续静默天数",
"value":"19"
},
{
"key":"静默情况",
"keyDesc":"月均手机静默天数",
"value":"4.10"
},
{
"key":"静默情况",
"keyDesc":"连续静默天数超过15天的次数",
"value":"1"
},
{
"key":"静默情况",
"keyDesc":"连续静默天数超过3天的次数",
"value":"17"
}
]
处理后showList数据
[
{
"key":"异地使用情况",
"keyDesc":"最近常用通话地",
"value":"淮北",
"keycount":2,
"keyshow":true,
"keyDesccount":1,
"keyDescshow":true,
"valuecount":1,
"valueshow":true,
"listcount":1,
"listshow":true
},
{
"key":"异地使用情况",
"keyDesc":"手机入网地",
"value":"浙江杭州",
"keycount":1,
"keyshow":false,
"keyDesccount":1,
"keyDescshow":true,
"valuecount":1,
"valueshow":true,
"listcount":1,
"listshow":true
},
{
"key":"互通号码情况",
"keyDesc":"互通电话号码个数",
"value":"6",
"keycount":2,
"keyshow":true,
"keyDesccount":1,
"keyDescshow":true,
"valuecount":1,
"valueshow":true,
"listcount":1,
"listshow":true
},
{
"key":"互通号码情况",
"keyDesc":"互通电话号码占比",
"value":"21",
"keycount":1,
"keyshow":false,
"keyDesccount":1,
"keyDescshow":true,
"valuecount":1,
"valueshow":true,
"listcount":1,
"listshow":true
},
{
"key":"主被叫通话详情",
"keyDesc":"主叫通话时长",
"value":"17124",
"keycount":3,
"keyshow":true,
"keyDesccount":1,
"keyDescshow":true,
"valuecount":1,
"valueshow":true,
"listcount":1,
"listshow":true
},
{
"key":"主被叫通话详情",
"keyDesc":"被叫通话时长",
"value":"10800",
"keycount":1,
"keyshow":false,
"keyDesccount":1,
"keyDescshow":true,
"valuecount":1,
"valueshow":true,
"listcount":1,
"listshow":true
},
{
"key":"主被叫通话详情",
"keyDesc":"主叫被叫比例",
"value":"158.56%",
"keycount":1,
"keyshow":false,
"keyDesccount":1,
"keyDescshow":true,
"valuecount":1,
"valueshow":true,
"listcount":1,
"listshow":true
},
{
"key":"静默情况",
"keyDesc":"最长连续静默天数",
"value":"19",
"keycount":4,
"keyshow":true,
"keyDesccount":1,
"keyDescshow":true,
"valuecount":1,
"valueshow":true,
"listcount":1,
"listshow":true
},
{
"key":"静默情况",
"keyDesc":"月均手机静默天数",
"value":"4.10",
"keycount":1,
"keyshow":false,
"keyDesccount":1,
"keyDescshow":true,
"valuecount":1,
"valueshow":true,
"listcount":1,
"listshow":true
},
{
"key":"静默情况",
"keyDesc":"连续静默天数超过15天的次数",
"value":"1",
"keycount":1,
"keyshow":false,
"keyDesccount":1,
"keyDescshow":true,
"valuecount":1,
"valueshow":true,
"listcount":1,
"listshow":true
},
{
"key":"静默情况",
"keyDesc":"连续静默天数超过3天的次数",
"value":"17",
"keycount":1,
"keyshow":false,
"keyDesccount":1,
"keyDescshow":true,
"valuecount":1,
"valueshow":true,
"listcount":1,
"listshow":true
}
]
————————————————
版权声明：本文为CSDN博主「ITKouSyou」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：/hx765287443/article/details/83085483
