根据客户需求按照原型图合并Element UI的进行表格的上下合并
效果如下
1.表格绑定单元格合并方法
使用Elemen表格提供的span-method绑定到我们需要合并的表格中
2.定义合并单元格合并方法
在data里定义接收的数组,然后根据方法判断数据有相同属性值确定表格进行合并.将数值添加到数组中
tableChange(tableData, spanName) {
let contactDot = 0
tableData.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1)
} else {
if (tableData[index][spanName] === tableData[index - 1][spanName]) {
this.spanArr[contactDot] += 1
this.spanArr.push(0)
} else {
contactDot = index
this.spanArr.push(1)
}
}
})
}
3.使用合并方法
后台返回数据后通过自定义方法获取数据,以及需要合并的属性
4.调用表格绑定单元格合并方法span-method
根据columnIndex 判断对那一行进行合并
newSpan({ row, column, rowIndex, columnIndex }) {
if ([1, 10].includes(columnIndex)) {
if (this.spanArr[rowIndex]) {
return {
rowspan: this.spanArr[rowIndex],
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}