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

最新推荐文章于 2024-09-26 16:58:44 发布

好奇的我

最新推荐文章于 2024-09-26 16:58:44 发布

阅读量1w

点赞数 5

分类专栏： Vue 文章标签： Element UI el-table Vue

本文链接：https://blog.csdn.net/weixin_31058701/article/details/102795983

版权

Vue 专栏收录该内容

1 篇文章 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
      }
    }
  }
},