Vue的table组件合并行方法

js 复制代码

/**
 * @param {Array} data - 原始数据集合
 * @param {string} addParamer - 这个是自定义的参数，向每个对象中添加一个参数 按照这个参数的个数进行合并
 * @param {} args - 剩余参数 这个是合并规则 ，比如按照时间合并 那就传入对象中的时间参数date， 如果有多个规则 例如同个时间内同一性别 那就传入date，sex，多个参数逗号隔开
 */
function mergeColunm(data, addParamer, ...args) {
  // 计算合并的数量
  let count = 0
  // 获取相同的
  let sameTimePerson = JSON.parse(JSON.stringify(data[0]))
  // 获取相同的条件的个数
  let sameTimePersonArray = []
  let samePersonIds = [];
  for (let i = 0; i < data.length; i++) {
    const currentPerson = data[i]
    let isSame = isSameValueWithKey(sameTimePerson, currentPerson, args)
    if (isSame) {
      count++
      samePersonIds.push(currentPerson.id)
    } else {
      // 把之前统计的数据添加到数组
      sameTimePerson[addParamer] = count
      sameTimePerson.samePersonIds = samePersonIds
      sameTimePersonArray.push(sameTimePerson)
      /// 置空ID数组
      samePersonIds = []
      // 把当前数据ID添加进数组
      samePersonIds.push(currentPerson.id)
      // 重置数据
      count = 1
      sameTimePerson = JSON.parse(JSON.stringify(currentPerson))
    }
    // 把最后一个数据放入数组
    if (i == data.length - 1) {
      sameTimePerson[addParamer] = count
      sameTimePerson.samePersonIds = samePersonIds
      sameTimePersonArray.push(sameTimePerson)
    }
  }

  data.forEach(item => {
    item[addParamer] = 0
    for (let i = 0; i < sameTimePersonArray.length; i++) {
      let p = sameTimePersonArray[i]
      let isSame = isSameValueWithKey(item, p, args)
      if (isSame && p.samePersonIds.indexOf(item.id) !== -1) {
        const findIndex = data.findIndex(subItem => {
          let isSame = isSameValueWithKey(subItem, p, args)
          return isSame && p.samePersonIds.indexOf(subItem.id) !== -1
        })
        data[findIndex][addParamer] = p[addParamer]
      }
    }
  })
  return data
}

function isSameValueWithKeys(objA, objB, ...args) {
  if (args.length === 0) {
    console.error('请传入对象 Key 来获取value值')
    return false
  }
  for (let key of keys) {
    if (!(key in objA) || !(key in objB)) {
      console.error('传入的Key不存在对象中')
      return false
    }
    if (objA[key] !== objB[key]) {
      return false;
    }
  }
  return true;
}

使用方法

这里以iView的Table组件为例。这里我们按照时间相同合并，并把计算的数量放在count里边。注意这里的返回值

html 复制代码

<template>
    <Table :data="resultData" border :span-method="handleSpan"></Table>
</template>

js 复制代码

// 这里我们调用合并的方法，按照date相同的进行合并，并使用count作为统计数量
// data是原始数据   resultData是处理后带有count的数据 把这个数据绑定在table上
let resultData = mergeColunm(data, 'count', 'date')

// 在这里返回想要合并的方式
handleSpan({row, column, rowIndex, columnIndex}) {
  // 假如我们想合并第四列 时间相同的行 那么就这样写
  if (columnIndex === 3) {
    return [row.count, 1];
  } 
}