当前位置: 首页 > Web前端 > vue.js

在elementUI中记录表格合并

时间:2023-04-01 12:34:22 vue.js

有这样的要求。表格第一列需要合并行,后续数据通过接口获取。效果图如下:首先,列中的时间是前端生成的,每一行数据中都有峰、峰、谷,可以硬编码,具体代码如下://Table:{{scope.row.company}}{{scope.row.symbolType}}{{范围.row[item.label]}}//data数据如下:data(){return{companyArr:[],companyPos:0,typeArr:[],typePos:[],//假数据,后期通过接口获取tableData:[{company:"xxxx1",type:1,symbolType:"peak",m1:"1",m2:"1",m3:"",m4:"",m5:"",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},{公司:"xxxx1",type:1,symbolType:"peak",m1:"",m2:"1",m3:"1",m4:"",m5:"",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},{公司:"xxxx1",类型:1,symbolType:“槽”,m1:“”,m2:“”,m3:“1”,m4:“1”,m5:"",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},{company:"xxxx2",type:2、symbolType:"秒杀",m1:"",m2:"2",m3:"2",m4:"",m5:"",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},{公司:"xxxx2",type:2,symbolType:"peak",m1:"",m2:"",m3:“2”,m4:“2”,m5:“”,m6:“”,m7:“”,m8:“”,m9:“”,“m10”:“”,m11:“”,m12:""},{company:"xxxx2",type:2,symbolType:"Trough",m1:"",m2:"",m3:"",m4:"2",m5:"2",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},{公司:"xxxx3",type:3,symbolType:"Spike",m1:"",m2:"",m3:"3",m4:"3",m5:"",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},{公司:"xxxx3",类型:3,symbolType:“峰值”,m1:“”,m2:“”,m3:“”,m4:“3”,m5:“3”,m6:“”,m7:“”,m8:“",m9:"","m10":"",m11:"",m12:""},{公司:"xxxx3",type:3,symbolType:"Trough",m1:"",m2:"",m3:"",m4:"",m5:"3",m6:"3",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},],}}//timeData:computed:{timeData(){让year=new日期().getFullYear();让对象={};让arr=[];for(leti=1;i<=12;i++){obj={time:year+"year"+i+"month",label:"m"+i,//这是每个月的字段名与后端确认};arr.push(obj);}返回arr;},},//为tableData数据处理而创建(){this.consolidation()}//methods中的方法//根据类型consolidation()计算要合并的行数(){this.companyArr=[];this.companyPos=0;this.typeArr=[];this.typePos=0;for(vari=0;i0?1:0;//如果合并_row=0,需要取消该列return{rowspan:_row_1,colspan:_col_1,};}elseif(columnIndex===1){const_row_2=this.typeArr[rowIndex];const_col_2=_row_2>0?1:0;返回{rowspan:_row_2,colspan:_col_2,};}},完美解决,后面的表格数据是从接口中获取的,转换成tableData中的数据结构后就可以直接使用了。