el-tabl数据合并问题?
el-table合并数据问题,如下图,我现在实现的效果:但是按我现在实现的话有个问题,只要有相同值就能合并。
而实际要求是:其他列有相同值正常合并,如果诉求类型里面有相同的类型值合并了,诉求利用率才能参与合并,但如果此时诉求利用率没有相同值也不合并。同理细分类型和细分利用率一样道理
请教大家怎么优化一下完成我这一需求。
我分装合并方法:
/**
* prop 属性名
* rowIndex:行索引值
*/
mergeCol(prop, rowIndex) { // 合并单元格
var idName = this.tableData[rowIndex][prop] // 获取当前单元格的值
if (rowIndex > 0) { // 判断是不是第一行
if (this.tableData[rowIndex][prop] != this.tableData[rowIndex - 1][prop]) { // 先判断当前单元格的值是不是和上一行的值相等
var i = rowIndex; var num = 0 // 定义一个变量i,用于记录行索引值并进行循环,num用于计数
while (i < this.tableData.length) { // 当索引值小于table的数组长度时,循环执行
if (this.tableData[i][prop] === idName) { // 判断循环的单元格的值是不是和当前行的值相等
i++ // 如果相等,则索引值加1
num++ // 合并的num计数加1
} else {
i = this.tableData.length // 如果不相等,将索引值设置为table的数组长度,跳出循环
}
}
return {
rowspan: num, // 最终将合并的行数返回
colspan: 1
}
} else {
return {
rowspan: 0, // 如果相等,则将rowspan设置为0
colspan: 1
}
}
} else { // 如果是第一行,则直接返回
let i = rowIndex; let num = 0
while (i < this.tableData.length) { // 当索引值小于table的数组长度时,循环执行
if (this.tableData[i][prop] === idName) {
i++
num++
} else {
i = this.tableData.length
}
}
return {
rowspan: num,
colspan: 1
}
}
},
组件span-method方法:
// 合并列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
switch (columnIndex) { // 将列索引作为判断值
// 通过传递不同的列索引和需要合并的属性名,可以实现不同列的合并
case 0:
return this.mergeCol('date', rowIndex)
case 1:
return this.mergeCol('staff', rowIndex)
case 2:
return this.mergeCol('sum_utilization_rate', rowIndex)
case 3:
return this.mergeCol('appeal_type', rowIndex)
case 4:
return this.mergeCol('appeal_type_utilization_rate', rowIndex)
case 5:
return this.mergeCol('detail_appeal_type', rowIndex)
case 6:
return this.mergeCol('detail_appeal_type_utilization_rate', rowIndex)
}
},
回复
1个回答
test
2024-06-23
在从接口获取到 tableData
数据后, 假设每列数据都是排序过的, 对其进行数据清洗 (这才是你实现需求需要处理的), 大概是以下步骤:
- 第一次出现的值标记为
isMerge = false
, 需要被合并的行设置isMerge = true
标记位 - 根据
isMerge: [false, false)
记录appeal_type
和detail_appeal_type
的合并行的索引范围 - 特殊处理
appeal_type_utilization_rate
和detail_appeal_type_utilization_rate
数据时根据 2. 记录的索引范围, 对值进行求和记为sum
, 并将索引范围内每一行的该列的值设置为sum
, 并将每行的isMerge
字段设置正确
清洗好数据后设置正确的 :span-method=objectSpanMethod
并编写 objectSpanMethod
: 根据 isMerge
字段合并单元格即可
function objectSpanMethod({ rowIndex }) {
const currentData = this.tableData[rowIndex];
if (!currentData.isMerge) {
return {
rowspan: 1,
colspan: 1,
};
}
return {
rowspan: 0,
colspan: 1,
};
}
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容