我们先来看一下 Element ui 官网给出的例子：
效果：
行合并效果
对应代码：
结构和正常需求差不多，唯一多了一个属性：:span-method="objectSpanMethod"
官网文档说明：
span-method 合并行或列的计算方法 Function({ row, column, rowIndex, columnIndex })
然后来解读一下官网实例中的各参数：看代码中的注释
现在我的需求是生成这样的一个表格：
需求效果图
页面结构如下：
查看详情
注：页面中的 formatter 是用做数据格式化，比如
- 0 => 男
- 1=> 女
下面是经过处理之后的我所需要的 table 的数据
// data
tableData: [{
"deviceId": "463346577777888888888",
"taxerName": "123",
"taxerId": "4762455555555543333333",
"terminalId": "346537568756876888888",
"invoiceTypes": ["025", "026", "004", "007"],
"rowspan": 1 // rowspan 1：表示不合并
}, {
"deviceId": "645767777754675677777",
"taxerName": "234",
"taxerId": "234444442342344444",
"terminalId": "432524355555333333",
"invoiceTypes": ["004", "007", "025", "026"],
"invoiceType": "004",
"status": 3,
"taxReturnResult": "成功",
"unlockResult": "失败",
"invoiceEndDate": "2019-04-15",
"taxReturnDate": "2019-03-31",
"rowspan": 4 // rowspan 4：表示合并下方的三行，共合并四行
}, {
"deviceId": "645767777754675677777",
"taxerName": "234",
"taxerId": "234444442342344444",
"terminalId": "432524355555333333",
"invoiceTypes": ["004", "007", "025", "026"],
"invoiceType": "026",
"status": 3,
"taxReturnResult": "成功",
"unlockResult": "失败",
"invoiceEndDate": "2019-04-15",
"taxReturnDate": "2019-03-31",
"rowspan": 0 // rowspan 0：表示已被上面的行合并，该单元格不显示
}, {
"deviceId": "645767777754675677777",
"taxerName": "234",
"taxerId": "234444442342344444",
"terminalId": "432524355555333333",
"invoiceTypes": ["004", "007", "025", "026"],
"invoiceType": "007",
"status": 3,
"taxReturnResult": "成功",
"unlockResult": "失败",
"invoiceEndDate": "2019-04-15",
"taxReturnDate": "2019-03-31",
"rowspan": 0 // rowspan 0：表示已被上面的行合并，该单元格不显示
}, {
"deviceId": "645767777754675677777",
"taxerName": "234",
"taxerId": "234444442342344444",
"terminalId": "432524355555333333",
"invoiceTypes": ["004", "007", "025", "026"],
"invoiceType": "025",
"status": 3,
"taxReturnResult": "成功",
"unlockResult": "失败",
"invoiceEndDate": "2019-04-15",
"taxReturnDate": "2019-03-31",
"rowspan": 0 // rowspan 0：表示已被上面的行合并，该单元格不显示
}, {
"deviceId": "756465866856767677777",
"taxerName": "555",
"taxerId": "453623465234645555455",
"terminalId": "6436543565455555",
"invoiceTypes": ["004", "007", "025", "026"],
"invoiceType": "007",
"status": 3,
"taxReturnResult": null,
"unlockResult": null,
"invoiceEndDate": "2019-04-15",
"taxReturnDate": "2019-03-31",
"rowspan": 3 // rowspan 3：表示合并下方的2行，共合并3行
}, {
"deviceId": "756465866856767677777",
"taxerName": "555",
"taxerId": "453623465234645555455",
"terminalId": "6436543565455555",
"invoiceTypes": ["004", "007", "025", "026"],
"invoiceType": "026",
"status": 3,
"taxReturnResult": null,
"unlockResult": null,
"invoiceEndDate": "2019-04-15",
"taxReturnDate": "2019-03-31",
"rowspan": 0 // rowspan 0：表示已被上面的行合并，该单元格不显示
}, {
"deviceId": "756465866856767677777",
"taxerName": "555",
"taxerId": "453623465234645555455",
"terminalId": "6436543565455555",
"invoiceTypes": ["004", "007", "025", "026"],
"invoiceType": "004",
"status": 3,
"taxReturnResult": null,
"unlockResult": null,
"invoiceEndDate": "2019-04-15",
"taxReturnDate": "2019-03-31",
"rowspan": 0 // rowspan 0：表示已被上面的行合并，该单元格不显示
}, {
"deviceId": "46365546555555555",
"taxerName": "666",
"taxerId": "787654545314312",
"terminalId": "789765454151453",
"invoiceTypes": ["004", "026"],
"invoiceType": "026",
"status": 3,
"taxReturnResult": "成功",
"unlockResult": "失败",
"invoiceEndDate": "2019-04-18",
"taxReturnDate": "2019-03-31",
"rowspan": 2// rowspan 2：表示合并下方的1行，共合并2行
}, {
"deviceId": "46365546555555555",
"taxerName": "666",
"taxerId": "787654545314312",
"terminalId": "789765454151453",
"invoiceTypes": ["004", "026"],
"invoiceType": "004",
"status": 3,
"taxReturnResult": "成功",
"unlockResult": "失败",
"invoiceEndDate": "2019-04-18",
"taxReturnDate": "2019-03-31",
"rowspan": 0 // rowspan 0：表示已被上面的行合并，该单元格不显示
}]
:span-method="objectSpanMethod" 行合并计算方法
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
// 之前我这么些判断，有点小蠢...
// if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 10) {
// 要合并的列的索引
let arr = [0, 1, 2, 3, 10]
// 设置要合并的列
if (arr.indexOf(columnIndex) !== -1) {
// 用于设置合并开始的行号，rowspan 不为 0，不是第一行时, 则该行需要向下合并
if (column.rowspan !== 0) {
return {
rowspan: row.rowspan, // 要合并的行数
colspan: 1
}
} else {
return {
rowspan: 0, // column.rowspan === 0 隐藏该单元格
colspan: 0
}
}
}
},
当然，也可以把每条数据里面的 rowspan 提出来放在一个数组里面，例如：[1, 4, 0, 0, 0, 3, 0, 0, 2, 0], 再去做处理
2019.5.25 更新
最近弄了个三级
效果图
数据模板
permissionData = [{
'deviceId': '首页',
'taxerName': '',
'taxerId': '',
'rowspan': [1, 1]
}, {
'deviceId': '管理功能',
'taxerName': '预开审核',
'taxerId': '预开审核管理',
'rowspan': [6, 1]
}, {
'deviceId': '管理功能',
'taxerName': '发票查询',
'taxerId': '已开发票查询',
'rowspan': [0, 3]
}, {
'deviceId': '管理功能',
'taxerName': '发票查询',
'taxerId': '未上传发票查询',
'rowspan': [0, 0]
}, {
'deviceId': '管理功能',
'taxerName': '发票查询',
'taxerId': '验签失败发票查询',
'rowspan': [0, 0]
}, {
'deviceId': '管理功能',
'taxerName': '商户综合管理',
'taxerId': '税控设备列表',
'rowspan': [0, 2]
}, {
'deviceId': '管理功能',
'taxerName': '商户综合管理',
'taxerId': '数据抄报',
'rowspan': [0, 0]
}]
},
合并的方法修改
// 合并表格
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if ([0, 1].indexOf(columnIndex) !== -1) {
if (column.rowspan !== 0) {
// 第一列
if (columnIndex === 0) {
return {
rowspan: row.rowspan[0],
colspan: 1
}
}
// 第二列
return {
rowspan: row.rowspan[1],
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
},
参考资料：https://blog.csdn.net/qq_29468573/article/details/80742646