element+vue项目中 table 表格需要先合并第一列的数据在合并第二列的数据
思路:
- 数据添加两个rowspan(rowspan_D , rowspan_B)(设备编号 , 操作批次)
- 合并第一例的多行数据 (rowspan_D )
- 第一列相同的数据提取到一个数据Arr
- Arr再合并第二列的多行(rowspan_B )
- 多个Arr连接成新数组
- return新数组
(代码为合并列)
// 表格列合并
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
return {
rowspan: row.rowspan_D,
colspan: 1
}
}
if (columnIndex === 1) {
return {
rowspan: row.rowspan_B,
colspan: 1
}
}
},
setRowspan(tableData) {
// tableData为借口返回数据,要展示在表格中
// 加上所需字段
tableData.forEach(v => {
v.rowspan_D = 1
v.rowspan_B = 1
})
let newTableData = []
for (let i = 0; i < tableData.length; i++) {
// 空数组 存储相同device的数据,然后再合并相同的batch
const Arr = []
// 内层循环,上面已经给所有的行都加了v.rowspan_D = 1
// 这里进行判断 如果当前行的 device_code 和下一行的相等 就把当前v.rowspan_D + 1 下一行的v.rowspan_D - 1
Arr.push(tableData[i])
for (let j = i + 1; j < tableData.length; j++) {
if (tableData[i].device_code === tableData[j].device_code) {
tableData[i].rowspan_D++
tableData[j].rowspan_D--
// 相同的数据放到一起
Arr.push(tableData[j])
}
}
// 第一列数据已完成多行合并,得到Arr
for (let x = 0; x < Arr.length; x++) {
for (let y = x + 1; y < Arr.length; y++) {
if (Arr[x].batch_number === Arr[y].batch_number) {
Arr[x].rowspan_B++
Arr[y].rowspan_B--
}
}
x = x + Arr[x].rowspan_B - 1
}
// 这里跳过已经重复的数据
i = i + tableData[i].rowspan_D - 1
// 第二列数据完成多行合并,存入数组
newTableData = [...newTableData, ...Arr]
}
console.log(newTableData)
return newTableData
},