当前位置：首页 > news >正文

Vue的table组件合并行方法

news 2025/9/17 4:36:25

/*** @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] = countsameTimePerson.samePersonIds = samePersonIdssameTimePersonArray.push(sameTimePerson)/// 置空ID数组samePersonIds = []// 把当前数据ID添加进数组samePersonIds.push(currentPerson.id)// 重置数据count = 1sameTimePerson = JSON.parse(JSON.stringify(currentPerson))}// 把最后一个数据放入数组if (i == data.length - 1) {sameTimePerson[addParamer] = countsameTimePerson.samePersonIds = samePersonIdssameTimePersonArray.push(sameTimePerson)}}data.forEach(item => {item[addParamer] = 0for (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里边。注意这里的返回值

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

// 这里我们调用合并的方法，按照date相同的进行合并，并使用count作为统计数量
// data是原始数据   resultData是处理后带有count的数据 把这个数据绑定在table上
let resultData = mergeColunm(data, 'count', 'date')// 在这里返回想要合并的方式
handleSpan({row, column, rowIndex, columnIndex}) {// 假如我们想合并第四列 时间相同的行 那么就这样写if (columnIndex === 3) {return [row.count, 1];} 
}