Vue.js 根据数据，进行Table单元格合并(原生方式以及element组件方式)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址：https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
表格代码
<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
}
]
element的table组件中需要用到单元格合并的话。
假设要实现一下的表格
| 名称1 | 名称2 | list集 | 名称5 | 名字6 | |
| 名称3 | 名称4 | ||||
| 啊 | a1 | b1 | c1 | d1 | 呀 |
| a2 | b2 | c2 | d2 | ||
数据
tempList: [{
name1: '啊',
list1: [
{
name2: 'a1',
name3: 'b1',
name4: 'c1',
name5: 'd1'
},
{
name2: 'a2',
name3: 'b2',
name4: 'c2',
name5: 'd2'
}
],
name6: '呀'
}]
表格代码
其中子表格里用到了:header-cell-style="{display: 'none'}"使表格头隐藏了
<el-table ref="table"
:data="tempList"
:span-method="objectSpanMethod"
fit
stripe>
<el-table-column prop="name1" label="名称1"></el-table-column>
<el-table-column label="名称2">
<template slot-scope="{row, $index}">
<el-table ref="table"
:data="row.list1"
:header-cell-style="{display: 'none'}"
fit>
<el-table-column prop="name2"></el-table-column>
<el-table-column prop="name3"></el-table-column>
<el-table-column prop="name4"></el-table-column>
<el-table-column prop="name5"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="list集" align="center">
<el-table-column label="名称3"></el-table-column>
<el-table-column label="名称4"></el-table-column>
</el-table-column>
<el-table-column label="名称5"></el-table-column>
<el-table-column prop="name6" label="名称6"></el-table-column>
</el-table>表格里使用到的js方法
这里通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
这里第2列开始到第5需要进行列的合并，所以columnIndex在等于1的时候需要设置列合并为4，也就是colspan:4，行不合并所以rowspan为1。而因为第二列设置了列的合并，所以要将第3列到第5列的单元格都隐藏掉，所以将rowspan和colspan都设为0。
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
return {
rowspan: 1,
colspan: 4
};
} else if (columnIndex > 1 && columnIndex < 5) {
return {
rowspan: 0,
colspan: 0
}
}
}
效果图：
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支：3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
4
0- 0
已为社区贡献3条内容
所有评论(0)