表格代码

<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组件中需要用到单元格合并的话。

假设要实现一下的表格

数据

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"fitstripe><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}}}

效果图：