HTML表格合并输出循环图形,vue+element ui el-table 完成动态添加表格&&动态合并/踩坑记录...

效果图

动态合并&&添加行.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)

}

})

}