效果图

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