效果图
动态合并&&添加行.png
添加后的图片效果
添加后.png
项目开发记录:
操作：1.添加行 2.合并行 3.可以完成复制上一工作日信息 4.前端浏览器添加项目记忆功能
数据要求：1.所有的数据必须按顺序排列否则单元合并失败
踩坑记录
1.点击表格行中的输入框操作会影响单元格合并/造成合并错位
图片：
表格错位.png
猜想原因：表格内操作/自动执行合并行操作其中标识也应该在重新计算。
解决方法：在每次改变输入框或者选择框时，执行this.tableData.push()操作，这样tableData得到监听，进而执行标识方法。
2.添加行也是表格操作，为什么当时没有错位呢？
原因：代码中有监听表格数据变化/表格数据长度发生变化就会自动调用合并标识方法
3.添加行数据时，利用es6数组splice方法， this.tableData.splice(indexNum, 0, { ...this.rowObj }) 后面参数直接写成this.rowObj时造成表格错位
原因：打印出了，添加后的tableData发现在添加时，数据的顺序混乱，后来用了上面的的{...this.rowObj}解决了
4.动态复制上一工作日信息时，也出现了问题，也是用了splice方法，刚开始也出现了混乱，后来改好了，见后面代码
合并表格行
1.关键：写一个标识数组(例如这个图表中的，以日期indexObj 为唯一标识，每个不一样的日期合并行数记录下来)
2.必要：监听表格数据(无深度监听)当表格数据添加行/删除行/复制时，都有表格数据的动态变化，从而计算标识
3.关键：合并行方法
objectSpanMethod({ row, columnIndex })
getIndexObj(val, index) {
this.indexObj = {}
this.hourSum = 0
val.forEach((r) => {
if (this.indexObj[r.Day] === undefined) {
this.indexObj[r.Day] = 1
this.hourSum += r.WorkHour
} else {
this.indexObj[r.Day]++
}
})
let arr = []
Object.values(this.indexObj).forEach((r, index) => {
if (index == 0) {
arr.push(0)
} else {
arr.push(arr[index - 1] + Object.values(this.indexObj)[index - 1])
}
})
this.indexArr = arr
if (index == 1) this.indexDate = Object.keys(this.indexObj)
//console.log(this.indexDate)
},
watch: {
tableData(val) {
this.getIndexObj(val, 0)
},
}
//得到合并行数
groupNumber(token) {
if (Object.prototype.hasOwnProperty.call(this.indexObj, token)) {
return this.indexObj[token]
}
},
//合并行列
objectSpanMethod({ row, columnIndex }) {
let cols = [0, 1] // 需要合并的列
if (cols.some((index) => index === columnIndex)) {
let token = row.Day
// 只针对首行做合并单元格操作
if (Object.prototype.hasOwnProperty.call(this.indexObj, token)) {
const rowSpan = this.groupNumber(token)
if (columnIndex === Math.max.apply(null, cols)) {
// 删除已经执行过合并操作的标识
delete this.indexObj[token]
}
return [rowSpan, 1]
}
return [0, 0]
}
//this.isAddRow = false
},添加行
1.添加行也就是添加表格数据(添加的数据类型要与其他行一致)
2.添加的数据位置也要计算好，表格数据有序才能正常合并
3.关键：添加时，以每个日期分组，在给个日期下面添加的行的Day字段要赋值相等，还要计算每个日期目前有多少行，这样才能根据数组方法把添加的行插入到指定位置。
添加行数据
注意传值是 { ...this.rowObj } 我也不知道为什么传this.rowObj会造成数据乱，这也是一个对象啊？？？
addRow(item, index) {
let indexNum =
index + this.tableData.filter((r) => r.Day == item.Day).length
this.rowObj.Day = item.Day
this.rowObj.MyDailyWorkHourID = item.MyDailyWorkHourID
this.rowObj.Week = item.Week
this.rowObj.WorkHourCycleID = item.WorkHourCycleID
// this.rowObj.EmployeeID = item.EmployeeID
// this.rowObj.EmployeeName = item.EmployeeName
// let obj = JSON.parse(JSON.stringify(this.rowObj))
this.tableData.splice(indexNum, 0, { ...this.rowObj })
},复制上一工作日信息
1.上一工作日几行就复制几行数据，复制时候会把当前复制行(你点击复制按钮的那行)覆盖
2.同样是动态添加行+表格合并
3.循环插入数据
步骤：
1.根据点击复制按钮行的信息，得到上一工作日Day
2.根据此Day，执行下面方法，得到上一工作日所有数据,此处Json转化，实际操作中没有转换时，插入数据会乱掉。
let arr = JSON.parse(
JSON.stringify(this.tableData.filter((r) => r.Day == index))
)3.改变标识，进行循环插入
//复制上个工作日信息
copy(item, number) {
let index = this.indexDate[
this.indexDate.findIndex((r) => r == item.Day) - 1
]
// console.log(this.indexDate)
let arr = JSON.parse(
JSON.stringify(this.tableData.filter((r) => r.Day == index))
)
arr.forEach((r, num) => {
r.Day = item.Day
r.MyDailyWorkHourID = item.MyDailyWorkHourID
r.Week = item.Week
r.WorkHour = item.WorkHour
if (num == 0) {
this.tableData.splice(number, 1, r)
} else {
this.tableData.splice(number + num, 0, r)
}
})
}
