通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
需求：
树形数据结构扁平化
一般情况下，数据列都是固定，行为合并项
-
确定合并项的起始行索引以及合并行数！
规则：第一次从第0行开始合并，第二次合并的开始位置是第一次开始合并的位置加上合并行
核心代码：
- 模拟后台返回的数据
tableData: [
{
voucherId: 100,
businessDate: "2020-11-16",
voucherNumber: 1,
entryInfo: [
{
brief: "摘要一",
urrId: 2059,
accountSubject: "其他货币资金",
trsamtd: 200,
trsamtc: 0,
},
{
brief: "摘要二",
urrId: 2060,
accountSubject: "应收股利",
trsamtd: 0,
trsamtc: 120,
},
{
brief: "摘要三",
urrId: 2061,
accountSubject: "未实现融资收益",
trsamtd: 0,
trsamtc: 80,
}
]
createZh: "Iris",
checkZh: "Iris",
status: 2,
},
{
voucherId: 101,
businessDate: "2020-11-17",
voucherNumber: 2,
entryInfo: [
{
brief: "摘要一",
urrId: 2070,
accountSubject: "其他货币资金",
trsamtd: 100,
trsamtc: 0,
},
]
createZh: "Iris",
checkZh: "Iris",
status: 1,
},
{
voucherId: 102,
businessDate: "2020-11-18",
voucherNumber: 3,
entryInfo: [
{
brief: "摘要一",
urrId: 2059,
accountSubject: "其他货币资金",
trsamtd: 200,
trsamtc: 0,
},
{
brief: "摘要二",
urrId: 2060,
accountSubject: "应收股利",
trsamtd: 0,
trsamtc: 200,
},
]
createZh: "Iris",
checkZh: "Iris",
status: 2,
},
]
- 数据扁平化处理
getIndex(tableDataList){
let arr = [] // 保存表格合并需要的数据
let s = 0 // 合并初始位置
let getTable = [] // 把原始数据中的子数据提取出来，生成新的可合并数据
tableDataList.forEach((item, i, data) => {
// 第二次合并开始位置
if (arr.length) {
s = arr[arr.length - 1].row + data[i - 1].entryInfo.length
}
arr.push({
row: s, // 保存表格合并的起始行
index: item.entryInfo.length, // 每次需要合并几行
})
if (item.entryInfo && item.entryInfo.length)
item.entryInfo.forEach(subItem => {
getTable.push({
voucherId: item.voucherId,
businessDate: item.businessDate,
voucherNumber: item.voucherNumber,
brief: subItem.brief,
urrId: subItem.urrId,
accountSubject: subItem.accountSubject,
trsamtd: subItem.trsamtd,
trsamtc: subItem.trsamtc,
createZh: item.createZh,
checkZh: item.checkZh,
status: item.status,
})
})
}
})
this.spanArray = arr
this.tableDataList = getTable
}
- 合并
SpanMethod(data) {
let { rowIndex, column } = data
if (
!column.property ||
column.property === 'businessDate' ||
column.property === 'voucherNumber' ||
column.property === 'createZh' ||
column.property === 'checkZh'
) {
let obj = [0, 0]
this.spanArray.some(v => {
if (rowIndex === v.row) {
obj = [v.index, 1]
}
})
return obj
}
},
