el-tabl数据合并问题？

Question

el-table合并数据问题，如下图，我现在实现的效果：

但是按我现在实现的话有个问题，只要有相同值就能合并。

而实际要求是：其他列有相同值正常合并，如果诉求类型里面有相同的类型值合并了，诉求利用率才能参与合并，但如果此时诉求利用率没有相同值也不合并。同理细分类型和细分利用率一样道理

请教大家怎么优化一下完成我这一需求。

我分装合并方法：

/**
     * prop 属性名
     * rowIndex：行索引值
     */
    mergeCol(prop, rowIndex) { // 合并单元格
      var idName = this.tableData[rowIndex][prop] // 获取当前单元格的值
      if (rowIndex > 0) { // 判断是不是第一行
        if (this.tableData[rowIndex][prop] != this.tableData[rowIndex - 1][prop]) { // 先判断当前单元格的值是不是和上一行的值相等
          var i = rowIndex; var num = 0 // 定义一个变量i，用于记录行索引值并进行循环，num用于计数
          while (i < this.tableData.length) { // 当索引值小于table的数组长度时，循环执行
            if (this.tableData[i][prop] === idName) { // 判断循环的单元格的值是不是和当前行的值相等
              i++ // 如果相等，则索引值加1
              num++ // 合并的num计数加1
            } else {
              i = this.tableData.length // 如果不相等，将索引值设置为table的数组长度，跳出循环
            }
          }
          return {
            rowspan: num, // 最终将合并的行数返回
            colspan: 1
          }
        } else {
          return {
            rowspan: 0, // 如果相等，则将rowspan设置为0
            colspan: 1
          }
        }
      } else { // 如果是第一行，则直接返回
        let i = rowIndex; let num = 0
        while (i < this.tableData.length) { // 当索引值小于table的数组长度时，循环执行
          if (this.tableData[i][prop] === idName) {
            i++
            num++
          } else {
            i = this.tableData.length
          }
        }
        return {
          rowspan: num,
          colspan: 1
        }
      }
    },

组件span-method方法：

// 合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      switch (columnIndex) { // 将列索引作为判断值
      // 通过传递不同的列索引和需要合并的属性名，可以实现不同列的合并
        case 0:
          return this.mergeCol('date', rowIndex)
        case 1:
          return this.mergeCol('staff', rowIndex)
        case 2:
          return this.mergeCol('sum_utilization_rate', rowIndex)
        case 3:
          return this.mergeCol('appeal_type', rowIndex)
        case 4:
          return this.mergeCol('appeal_type_utilization_rate', rowIndex)
        case 5:
          return this.mergeCol('detail_appeal_type', rowIndex)
        case 6:
          return this.mergeCol('detail_appeal_type_utilization_rate', rowIndex)
      }
    },

Answer 1

在从接口获取到 tableData 数据后, 假设每列数据都是排序过的, 对其进行数据清洗 (这才是你实现需求需要处理的), 大概是以下步骤:

1. 第一次出现的值标记为 isMerge = false, 需要被合并的行设置 isMerge = true 标记位
2. 根据 isMerge: [false, false) 记录 appeal_type 和 detail_appeal_type 的合并行的索引范围
3. 特殊处理 appeal_type_utilization_rate 和 detail_appeal_type_utilization_rate 数据时根据 2. 记录的索引范围, 对值进行求和记为 sum, 并将索引范围内每一行的该列的值设置为 sum, 并将每行的 isMerge 字段设置正确

清洗好数据后设置正确的 :span-method=objectSpanMethod 并编写 objectSpanMethod: 根据 isMerge 字段合并单元格即可

function objectSpanMethod({ rowIndex }) {
    const currentData = this.tableData[rowIndex];
    if (!currentData.isMerge) {
      return {
        rowspan: 1,
        colspan: 1,
      };
    }
    return {
      rowspan: 0,
      colspan: 1,
    };
}