表格某一列(一般是前几列)合并重复出现的字段是很常见的需求,合并行之后表格看起来会比较清晰(分组),合并的前提是需要合并的字段已经按照升序(降序)排列好,核心算法如下:
<template>
<div>
</div>
</template>
<script>
export default {
name: 'tmp',
components: {},
data () {
return {
table: {
data: [],
spanArr: {
column1: [],
column2: []
},
},
}
},
computed: {},
watch: {},
methods: {
// 为表格合并列做准备,这里关键是要生成一个数组,这个数组记录了这个列在每一行需要合并成多少行,即就是每一行实际占多少行
getSpanArr (data) {
let pos = {
column1: 0, // 需要合并的第一个列,记录出现重复值的上一行下标值
column2: 0, // 需要合并的第二个列,记录出现重复值的上一行下标值
}
for (let i = 0; i < data.length; i++) {
if (i === 0) {
this.table.spanArr.column1.push(1) // 第一行数据肯定默认占用一行的
pos.column1 = 0
this.table.spanArr.column2.push(1) // 第一行数据肯定默认占用一行的
pos.column2 = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].column1 === data[i - 1].column1) {
this.table.spanArr.column1[pos.column1] += 1 // 重复值实际占用的行数
this.table.spanArr.column1.push(0)
} else {
this.table.spanArr.column1.push(1) // 表明该值没有出现重复
pos.column1 = i
}
if ((data[i].column1 + data[i].column2) === (data[i - 1].column1 + data[i - 1].column2)) {
this.table.spanArr.column2[pos.column2] += 1 // 重复值实际占用的行数
this.table.spanArr.column2.push(0)
} else {
this.table.spanArr.column2.push(1) // 表明该值没有出现重复
pos.column2 = i
}
}
}
},
// 表格合并列方法
handleSpan ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.table.spanArr.column1[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row, // 占用行数
colspan: _col, // 占用列数
}
} else if (columnIndex === 1) {
const _row = this.table.spanArr.column2[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row, // 占用行数
colspan: _col, // 占用列数
}
}
},
},
mounted () {
},
}
</script>
更厉害的封装看这里:https://blog.csdn.net/lg993372246/article/details/113117650