element表格合并前两列相同值内容

方法一:

1:从数据源定义每一行每一列的合并长度

this.tableData.map((item, index) => {

        let loopIndex1 = index + 1

        let loopIndex2 = index + 1

        let row1 = 1

        let row2 = 1

        while (loopIndex1 < this.tableData.length) {

          if (item.columnName1 !== this.tableData[loopIndex1].columnName1) {

            // 第一列某一行的值与下一行不同

            break

          }

          this.tableData[loopIndex1].combineRow1Arr = [0, 0]

          loopIndex1 += 1

          row1 += 1

        }

        while (loopIndex2 < loopIndex1) {

          // 找到第一列连续相同的值下第二列连续相同的值

          if (item.columnName2 !== this.tableData[loopIndex2].columnName2) {

            // 位置不同

            break

          }

          this.tableData[loopIndex2].combineRow2Arr = [0, 0]

          loopIndex2 += 1

          row2 += 1

        }

        item.combineRow1Arr = item.combineRow1Arr || [row1, 1]

        item.combineRow2Arr = item.combineRow2Arr || [row2, 1]

        return item

      })

2:在表格的回调里面确认

      if (columnIndex > 1) return [1, 1]

      if (columnIndex === 0) return row.combineRow1Arr

      if (columnIndex === 1) return row.combineRow2Arr

弊端: 复杂度较多,不容易理解

方法二:

直接在表格的回调里面确认

      if (columnIndex > 1) return [1, 1]

      const preRow = this.tableData[rowIndex - 1]

      if (preRow) {

        if (row[column.property] === preRow[column.property]) {

          // 已经被合并过

          if (columnIndex === 0) {

            return [0, 0]

          } else if (columnIndex === 1 && row['columnName1'] === preRow['columnName1']) {

          // 第二列相同依赖上第一列值相同

            return [0, 0]

          }

        }

      }

      // 下一行

      let nextRow = rowIndex + 1

      let rowSpan = 1

      while (this.tableData.length > nextRow) {

        if (row[column.property] !== this.tableData[nextRow][column.property]) {

          // 不相同

          break

        }

        if (columnIndex === 1 && row['columnName1'] !== this.tableData[nextRow]['columnName1']) {

         // 第二列相同依赖上第一列值相同

          break

        }

        nextRow += 1

        rowSpan += 1

      }

      return [rowSpan, 1]

完~

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容