动态实现合并table表格多列多行
官网网址:https://element.eleme.cn/#/zh-CN/component/table
1,先提供最终的实现效果图:
下面的table是根据上面3个表的长度动态生成的。
2,先提供最终的动态实现代码:
//合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//动态生成table表格的list
var subLength=this.priceSubList.length;
//运输方式动态生成table表格的list
var traLength=this.priceTraList.length;
//KG计算范围动态生成table表格的list
var kgLength=this.priceKgList.length;
//M3计算范围动态生成table表格的list
var m3Length=this.priceM3List.length;
var totalLength=kgLength+m3Length;
//第一列
if (columnIndex === 0) {
if (rowIndex % totalLength === 0) {
return {
rowspan: totalLength,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
//第二列
if (columnIndex === 1) {
var num=subLength/traLength;
//动态实现
if(kgLength!=0){
for(var i=0;i<traLength;i++){
if(rowIndex<(i+1)*num){
if(rowIndex==i*num){
return {
rowspan: kgLength,
colspan: 1
};
}else if(rowIndex <i*num+kgLength-1){
return [0,0]
}else if(rowIndex ==i*num+kgLength){
return {
rowspan: m3Length,
colspan: 1
};
}else{
return [0,0]
}
}
}
}else{ //若kgLength=0,需要以m3Length为主
for(var i=0;i<traLength;i++){
if(rowIndex<(i+1)*num){
if(rowIndex==i*num){
return {
rowspan: m3Length,
colspan: 1
};
}else if(rowIndex <i*num+m3Length-1){
return [0,0]
}else if(rowIndex ==i*num+m3Length){
return {
rowspan: m3Length,
colspan: 1
};
}else{
return [0,0]
}
}
}
}
//代码写死!(在下面的代码有助于理解它是如何动态实现的)
//0
//num
//2*num
//注意:获取this.priceSubList的方法,需要排序,
//目前我这里的排序是kgLength相关的数据优先于m3Length数据,所以是这样实现
// if(rowIndex<1*num){
// if(rowIndex==0*num){
// return {
// rowspan: kgLength,
// colspan: 1
// };
// }else if(rowIndex <kgLength-1){
// return [0,0]
// }else if(rowIndex ==kgLength){
// return {
// rowspan: m3Length,
// colspan: 1
// };
// }else{
// return [0,0]
// }
// }else if(rowIndex<2*num){
// if(rowIndex==1*num){
// return {
// rowspan: kgLength,
// colspan: 1
// };
// }else if(rowIndex <num+kgLength-1){
// return [0,0]
// }else if(rowIndex ==num+kgLength){
// return {
// rowspan: m3Length,
// colspan: 1
// };
// }else{
// return [0,0]
// }
// }else if(rowIndex<3*num){
// if(rowIndex==2*num){
// return {
// rowspan: kgLength,
// colspan: 1
// };
// }else if(rowIndex <2*num+kgLength-1){
// return [0,0]
// }else if(rowIndex ==2*num+kgLength){
// return {
// rowspan: m3Length,
// colspan: 1
// };
// }else{
// return [0,0]
// }
// }
}
},
3,要想看得懂,首先需要看得懂官方的提供的例子。
版权声明:本文为hylshyshm原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。