合并单元格想要的效果:
image.png
合并单元格需要三步:
1.合并相同的单元格 计算数量
2.使用span-method分发合并
3.鼠标移上去背景色效果实现
1.第一步此步骤一定要在数据拿到之后给再渲染
getOrderNumber () { // 合并内容相同的单元格
let contactDot = 0
const OrderIndexArr = []
this.previewPlanList.forEach((item, index) => {
if (index === 0) {
OrderIndexArr.push(1)
} else {
// 注释:name 是对应体系,data 对应table绑定的数据源
if (item.mergeId === this.previewPlanList[index - 1].mergeId) {
OrderIndexArr[contactDot] += 1
OrderIndexArr.push(0)
} else {
contactDot = index
OrderIndexArr.push(1)
}
}
})
this.OrderIndexArr = OrderIndexArr
}
2.第二步span-method
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 7 || columnIndex === 8) {
if (this.OrderIndexArr[rowIndex]) {
return {
rowspan: this.OrderIndexArr[rowIndex],
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
},
3.鼠标移入背景色
// 鼠标进入单元格
handleMouseEnter (row, column, cell, event) {
this.arr.forEach((item) => {
if (row.mergeId === item.mergeId) {
this.rowIndex = row.mergeId
}
})
},
// 给相应的rowIndex添加类名
rowClassName ({ row, rowIndex }) {
// console.log(row, rowIndex);
let r = -1
this.arr.forEach((item) => {
if (this.rowIndex === row.mergeId) {
r = rowIndex
}
})
if (rowIndex === r) {
return 'hovered-row'
}
},
// 鼠标离开
handleMouseLeave (row, column, cell, event) {
this.rowIndex = -1
}
注意:
image.png
网友评论