Vue.js 根据数据，进行Table单元格合并

ITKouSyou 2018-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版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hx765287443/article/details/83085483

Vue.js 根据数据，进行Table单元格合并相关推荐

【EasyExcel】EasyExcel列表填充数据时指定单元格合并
EasyExcel列表填充数据时指定单元格合并 package com.susing.security.handler;import com.alibaba.excel.metadata.CellDa ...
Vue.js 根据数据，进行Table单元格合并(原生方式以及element组件方式)
表格代码 <table cellspacing="0" cellpadding="0" border="0" style=" ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
阿里 easyExcel 动态写入数据,多级表头,单元格合并示例
excel写入流程 public static void main(String[] args) throws Exception {//标题List<List<String>> ...
element ui 的table单元格合并
element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...
layui table 单元格合并
在表格加载完成方法执行 done:function(res, curr, count){ merge(res); } //合并单元格 funct ...
table单元格合并
colspan是横向合并:rowspan是纵向合并.如 <td class="subject" colspan="2">回复觉得很分阶段方</ ...
js/jquery循环提取table单元格值
<table id="tbitem"><tr><td>测试数据1</td></tr><tr><td&g ...
表格（table属性、th/td属性、单元格合并）
表格现在HTML 表格应该用于表格数据语法:表格的容器<table>行<tr><td>普通单元格</td><th>表头单元格</ ...

Vue.js 根据数据，进行Table单元格合并

Vue.js 根据数据，进行Table单元格合并相关推荐

最新文章

热门文章