关键是判断锁定需要合并的列和行：
// 合并行
rowspan({ row, column, rowIndex, columnIndex }) {
// 第1列才合并
if (columnIndex == 0) {
// 从第1行开始 每4行合并
if (rowIndex % 4 === 0) {
return { rowspan: 4, colspan: 1 };
} else {
// 其他行不处理
return { rowspan: 0, colspan: 0 };
}
}
}
<template>
<div class="app-container">
<el-table
v-loading="loading"
:span-method="rowspan"
:data="scores"
size="mini"
>
<el-table-column label="学号" align="left" prop="xh" />
<el-table-column label="姓名" align="left" prop="nickName" />
<el-table-column label="得分" align="center" prop="score" />
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
scores: [],
cols:{0:{}},
};
},
methods: {
rowspan({ row, column, rowIndex, columnIndex }) {
if (!!this.cols[columnIndex]) {
if (!!this.cols[columnIndex][rowIndex]) {
return [this.cols[columnIndex][rowIndex], 1];
} else {
return [0,0];
}
}
},
span() {
let size = this.scores.length;
let xhIndex = [];
let xhObj = {};
this.scores.forEach((value,index,arr)=>{
if(index == 0 || (index>0 && value.xh != arr[index - 1].xh)){
xhIndex.push(index);
}
});
xhIndex.push(size);
xhIndex.forEach((value,index,arr)=>{
if(index < arr.length - 1){
xhObj[value] = arr[index+ 1] - value;
}
});
this.cols[0] = xhObj;
},
},
};
</script>
未经允许不得转载：
红吉他 »
HTML5 »
el-table合并相同的行