el-table 列合并的单元格,新增一行后需要合并单元格的列不会自动合并,合并单元格丢失问题

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 只处理第一列
        const belongPlace = row.belongPlace
        if (!this.spanMap[belongPlace]) { // 如果当前belongPlace还没有计算过span，则进行计算
          let spanCount = 1 // 初始化spanCount为1
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (this.tableData[i].belongPlace === belongPlace) {
              spanCount++ // 如果下面的行还有相同的belongPlace，则spanCount加1
            } else {
              break // 如果belongPlace不同了，则跳出循环
            }
          }
          this.spanMap[belongPlace] = { rowspan: spanCount, rowIndex } // 存储计算结果
        }
        const { rowspan, rowIndex: startRow } = this.spanMap[belongPlace]
        if (rowIndex === startRow) { // 如果是该组的第一行，则返回计算好的rowspan
          return {
            rowspan,
            colspan: 1
          }
        } else { // 否则返回{ rowspan: 0, colspan: 0 }，表示该行被上面的行合并了
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },

需求是第一列值相等的行合并单元格

提供用户新增行,同样已经有相同值的自动合并.

1. 需要先按照第一列的值排序

2. 因为objectSpanMethod中只有没有计算过span才能触发计算,所以我们在新增的时候还需要手动计算span 

onAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 在这里处理表单提交逻辑
          let dataTemp = JSON.parse(JSON.stringify(this.tableData))
          this.form.projectNo.forEach((item, index) => {
            dataTemp.push({
              belongPlace: this.form.belongPlace,
              projectNo: item,
              onlyKey: this.form.belongPlace + ';' + item
            })
          })
					dataTemp = dataTemp.sort((a, b) => {
            if (a.belongPlace < b.belongPlace) {
              return -1
            }
            if (a.belongPlace > b.belongPlace) {
              return 1
            }
            return 0
          })
          this.spanMap = caculateSpan(dataTemp)
          this.tableData = dataTemp
          this.visiblePopover = false
        } else {
          console.log('表单验证失败!')
          return false
        }
      })
    }

function caculateSpan(data) {
  const spanMap = {}
  let lastItem = {}
  let i = 0
  while (i < data.length) {
    const belongPlace = data[i].belongPlace
    if (!spanMap[belongPlace]) {
      spanMap[belongPlace] = {}
    }
    if (!lastItem || lastItem.belongPlace !== belongPlace) {
      spanMap[belongPlace].rowIndex = i
      spanMap[belongPlace].rowspan = 1
    } else {
      spanMap[belongPlace].rowspan++
    }

    lastItem = data[i]
    i++
  }
  return spanMap
}