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];
  } 
}
相关推荐
abigale0343 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络8 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码