1 功能说明
使用el-table中的span-method属性实现将混乱的列表数据合并行单元格显示。数据列表如下:
[{ name:'张三', course:'英语', score:'90' }, { name:'李四', course:'数学', score:'50' }, { name:'王五', course:'语文', score:'90' }, { name:'张三', course:'政治', score:'30' }, { name:'李四', course:'英语', score:'80' }]
2 截图
3 源代码
<template>
<div class="combine_cell">
<div class="cc_con">
<el-table
v-bind:data="dataArr"
v-bind:span-method="rowSpanMethod">
<el-table-column prop='name' label='姓名'></el-table-column>
<el-table-column prop='course' label='课程'></el-table-column>
<el-table-column prop='score' label='成绩'></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'CombineCell',
data(){
return{
dataArr: new Array(),
rowSpanArr: new Array()
}
},
created(){
this.dataArr = [
{ name:'张三', course:'英语', score:'90' },
{ name:'李四', course:'数学', score:'50' },
{ name:'王五', course:'语文', score:'90' },
{ name:'张三', course:'政治', score:'30' },
{ name:'李四', course:'英语', score:'80' },
{ name:'王五', course:'数学', score:'90' },
{ name:'张三', course:'语文', score:'70' },
{ name:'李四', course:'政治', score:'60' },
{ name:'王五', course:'英语', score:'70' },
{ name:'李四', course:'数学', score:'80' },
{ name:'张三', course:'语文', score:'90' },
{ name:'王五', course:'政治', score:'40' }
];
this.dataArr = this.resetDataArr(this.dataArr, 'name');
this.rowSpanArr = this.getRowSpanArr(this.dataArr, 'name');
},
methods:{
// 重置数据, tempAttr是合并的那一列的属性名
resetDataArr: function(tempDataArr, tempAttr){
let newDataArr = new Array();
tempDataArr.forEach(originItem => {
let i=0;
for(i=0; i<newDataArr.length; i++){
if(originItem[tempAttr] === newDataArr[i][tempAttr]){
newDataArr.splice(i, 0, originItem);
break;
}
}
if(i===newDataArr.length){
newDataArr.push(originItem);
}
});
return newDataArr;
},
// 设置合并的列
rowSpanMethod: function(param){
if(this.rowSpanArr.length === 0){
return;
}
if(param.columnIndex === 0){
const row = this.rowSpanArr[param.rowIndex];
const col = row>0?1:0;
return{
rowspan:row,
colspan:col
}
}
},
// 获得合并列的空行数
getRowSpanArr: function(tempDataArr, tempAttr){
let tempRowSpanArr = new Array();
let startIndex = 0;
if(tempDataArr.length>1){
tempRowSpanArr.push(1);
}else{
return tempRowSpanArr;
}
for(let i=1; i<tempDataArr.length; i++){
if(tempDataArr[i][tempAttr] == tempDataArr[i-1][tempAttr]){
tempRowSpanArr.push(0);
tempRowSpanArr[startIndex] = tempRowSpanArr[startIndex] + 1;
}else{
tempRowSpanArr.push(1);
startIndex = i;
}
}
return tempRowSpanArr;
}
}
}
</script>
<style scoped>
</style>