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];
  } 
}
相关推荐
excel21 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript