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];
  } 
}
相关推荐
翻滚吧键盘7 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹13 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志15 分钟前
typescript结构化类型应用两例
javascript
杨进军34 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js