微客导航 » 文章资讯 » vue 中 elment-ui table合并上下两行相同数据单元格

vue 中 elment-ui table合并上下两行相同数据单元格

2023-08-03 21:57:03 303

html：

method

objectOneMethod({row,column,rowIndex,columnIndex}){
if(columnIndex===0){
const_row=this.setTable(this.ptableDate).one[rowIndex];
const_col=_row>0?1:0;
return{
rowspan:_row,
colspan:_col
};
}
if(columnIndex===1){
const_row=this.setTable(this.ptableDate).two[rowIndex];
const_col=_row>0?1:0;
return{
rowspan:_row,
colspan:_col
};
}
},
setTable(tableData){
letspanOneArr=[],
spanTwoArr=[],
concatOne=0,
concatTwo=0;
tableData.forEach((item,index)=>{
if(index===0){
spanOneArr.push(1);
spanTwoArr.push(1);
}else{
if(item.projName===tableData[index-1].projName){
//第一列需合并相同内容的判断条件
spanOneArr[concatOne]+=1;
spanOneArr.push(0);
}else{
spanOneArr.push(1);
concatOne=index;
}
if(item.dirtySection===tableData[index-1].dirtySection){
//第二列和需合并相同内容的判断条件
spanTwoArr[concatTwo]+=1;
spanTwoArr.push(0);
}else{
spanTwoArr.push(1);
concatTwo=index;
}
}
});
return{
one:spanOneArr,
two:spanTwoArr
};
},

ps：下面看下ELEMENT-UI合并单元格的方法

arraySpanMethod({row,column,rowIndex,columnIndex}){
//只合并区域位置
//columnIndex横的第一列
//rowIndex竖的数组的length%3==0合并单元格
if(columnIndex===0){//如果是第一行
if(rowIndex%3===0){//如果是数组长度%3==0
return{
rowspan:3,
colspan:1
};
}else{
return{
rowspan:0,
colspan:0
};
}
}
},

总结

以上所述是小编给大家介绍的vue中elment-uitable合并上下两行相同数据单元格，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue 中 elment-ui table合并上下两行相同数据单元格

热门推荐

随机推荐