element-table实现一个员工两个月的工资条数据对比

实现一个表格里面，单个员工的本月数据和上月数据对比，比如本月薪资发放与上月薪资发放数据对比，将不同的项标记，只标记上月不同的，标记成蓝色背景，如果是本月入职的，没有上月的记录，就没有对比数据，表格里面标记员工工号这一单元格，标记成黄色。

// 1，首先到后端拿到数据
const tableData = this.table.data
// 是否是刚入职的数据或者导入的数据
// 拿到dataMap,里面就是员工对应的几条数据，1条就是新入职的，
// 2条就是本月和上月的
// firstEntry 是只有一条数据的刚入职的只有一个月薪资的员工
const dataMap = {}
tableData.forEach((item) => {if (dataMap[item.employeeId]) {dataMap[item.employeeId].push(item)const [data1] = dataMap[item.employeeId]data1.firstEntry = false// data2.firstEntry = falsethis.compareData(dataMap[item.employeeId])} else {dataMap[item.employeeId] = [item]item.firstEntry = true}
}
// 生成的数据是 {1000082: [{}, {}] }/* 或者 */
// 对比之前也可以这样处理
// 1.取出数据里面相同employeeId出现的次数
let countedEmployeeIds = tableData.reduce((obj, item) => {if (item['employeeId'] in obj) {obj[`${item.employeeId}`]++} else {obj[`${item.employeeId}`] = 1}return obj
}, {})
// countedEmployeeIds: {1000082: 2} 或者 countedEmployeeIds: {1000031: 1}
// 2.标记刚入职的this.table.data.forEach(item => {item.firstEntry = countedEmployeeIds[item.employeeId] <= 1})// 3.取出对比的员工的数据
let compareData = []
let sameData = []
tableData.map(item => {if (sameData.length >= 2) {sameData = []}if (countedEmployeeIds[item.employeeId] > 1) {sameData.push(item)}if (sameData.length === 2) {compareData.push(sameData)}
})
// 4.用该数据去对比
compareData.forEach(item => {this.compareData(item)
}) 

// 用differentOptions存下对比员工不同的项
// differentOptions: {}
compareData (item) {this.differentOptions[`${item[0].employeeId}`] = []Object.keys(item[0]).forEach(key => {let value0 = item[0][key]let value1 = item[1][key]if (value0 !== value1) {if (Number(key)) {this.differentOptions[`${item[0].employeeId}`].push(key)}}})
}

// 给单元格添加不同背景
// :cell-class-name="setCellClassName"
setCellClassName ({ row, column, rowIndex, columnIndex }) {
// console.log('@@@', this.differentOptions)
if (column.property === 'employeeCode') {if (row.firstEntry) {return 'first-entry'} else {return ''}
} else {if (rowIndex % 2 === 0) {if (this.differentOptions[row.employeeId]?.some(prop => prop === column.property)) {return 'different-option'} else {return ''}}
}

// 样式设置 scss scoped
/deep/.first-entry {background-color: #2AF598 !important;background-clip: content-box !important;
}
/deep/.different-option {background-color: #00b0f0 !important;background-clip: content-box !important;
}

效果如图：