Element UI el-table合并表格相同值行合并

红太狼 2023-06-11 05:21 8阅读 0赞

# Vue+Element UI el-table合并表格相同值行合并 #

## 代码一 ##

export function formatRowspanAndColspan(tableData, tableKey) {
      const newArr = []
      // 分类检出tempList中的数据push到newArr中
      for (let i = 0; i < tableData.length;) {
        let count = 0
        for (let j = i; j < tableData.length; j++) {
          if (tableKey === 'dataType') {
            if (tableData[i].dataType === tableData[j].dataType) {
              count++
            }
          }
        }
        if (tableKey === 'dataType') {
          newArr.push({
            data: tableData[i].dataType,
            num: count
          })
        }
        i += count
      }
      // 根据此算法，格式化newArr中的数据
      for (let k = 0; k < newArr.length; k++) {
        if (newArr[k].num > 1 || newArr[k].num === 0) {
          for (let w = k; w < newArr[k].num + k - 1; w++) {
            newArr.splice(w + 1, 0, {
              data: newArr[k].data,
              num: 0
            })
          }
        }
      }
      return newArr
    }

## 代码二 ##

// 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // columnIndex代表列，合并表格
      const newArr = formatRowspanAndColspan(this.tableData, 'dataType')
      // 合并第二列 日期（星期）
      if (columnIndex === 2) {
        const num = newArr[rowIndex].num
        if (num > 1) {
          return {
            rowspan: num,
            colspan: 1
          }
        } else if (num < 1) {
          return {
            rowspan: 1,
            colspan: num
          }
        } else {
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      }
    },