动态合并单元格行和列方法封装 ~~~起手可用

在项目中遇到一个需求合并单元格行跟列同时合并,抽个方法做个记录,可以直接引入min.js中直接使用

/**
 * 
 * @param {*} table vue对象, Element-ui Table 插件
 * @param {*} colMap 数组, 需要合并的列名,如: ['c1','c2','c2']
 * @param {*} isSpanRow 布尔,是否合并行
 * @param {*} isSpanCol 布尔,是否合并列
 * @returns 二维数组,Table的显示结果
 *
 * mergeCell(this.$refs.dTable, ['c1', 'c2', 'c3'], true, true)
 */
 var mergeCell = function(table, colMap, isSpanRow = true, isSpanCol = true) {
  
  var list = table.tableData

  // table.tableData 中 每行的数据是一个对象,不能直接的反应显示的顺序
  // 即你不能知道第一列右则的列是那个.
  // 需要通过table.columns建立显示的顺序
  var columns = []
  for (const item of table.columns) {
    // console.log(item);
    columns.push(item.property)
  }

  // 结果应是一个二维数组
  // 先充填数据,使用其成为全显示的数组
  var result = []
  for (let row = 0, rowLen = list.length; row < rowLen; row++) {
    const ss = []
    for (let col = 0, colLen = columns.length; col < colLen; col++) {
      ss.push([1, 1])
    }
    result.push(ss)
  }

  // 合并行
  if (isSpanRow) {
    result = mergeRow(list, columns, colMap, result)
    // console.log(result);
  }

  // 合并列
  if (isSpanCol) {
    result = mergeCol(list, columns, colMap, result)
    // console.log(result);
  }

  return result
}

var mergeRow = function(list, columns, colMap, result) {
  for (const item of colMap) {
    const p = {
      colKey: item,
      col: columns.indexOf(item),
      row: 0,
      val: ''
    }
    for (let row = 0, rowLen = list.length; row < rowLen; row++) {
      if (p.val === list[row][p.colKey]) {
        result[p.row][p.col][0] += 1
        result[row][p.col][0] = 0
      } else {
        p.row = row
        p.val = list[row][p.colKey]
      }
    }
  }
  return result
}

var mergeCol = function(list, columns, colMap, result) {
  for (let row = 0, rowLen = list.length; row < rowLen; row++) {
    const p = {
      col: 0,
      row: row,
      val: ''
    }

    for (let col = 0, colLen = columns.length; col < colLen; col++) {
      if (!colMap.includes(columns[col])) {
        p.col = col
        p.val = list[row][columns[col]]
        continue
      }

      if (p.val === list[row][columns[col]]&&result[p.row][p.col][0]==result[p.row][col][0]) {
        // console.log(result[row][col]);
        result[p.row][p.col][1] += 1
        result[p.row][col][1] = 0
      } else {
        p.col = col
        p.val = list[row][columns[col]]
      }
    }
  }

  return result
}
export default mergeCell

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值