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

el-table 合并单元格,展示合计行并自定义单元格内容

时间:2023-04-01 01:21:17 vue.js

el-table合并单元格,显示总行数,自定义单元格内容。业务需求&&设计原型业务需求不需要提及。看了设计图,大家应该都很好理解了。那我就简单说一下吧(啊,很高兴给它剥皮)。表格数据中:第一列合并同名行,同名数据项个数不固定。添加合计行,合计行名称占两列单元格,将合计行最后一个单元格合并居中,显示自定义内容。在这个需求中,进度条的设计图如下。我标记了对应的需求,先实现元素的合并行或者列就很清楚了,绑定一个方法,在方法中实现我们合并的行,而我们的需求中要合并的行数是不固定的,所以不能直接复制官网的例子。computed:{groupNum(){//获取要合并的数据的名称returnnewSet(this.data.map((o)=>o.name));}},methods:{nameGroup(name){//获取同名的Lengthreturnthis.getData.filter((o)=>o.name==name).length;},nameLen(name){consttmp=Array.from(this.groupNum);让索引=tmp。索引(名称);让len=0;for(leti=0;i{consttds=document.querySelectorAll("#table.el-table__footer-wrappertr>td");tds[0].colSpan=2;tds[0].style.textAlign="center";tds[1].style.display="none";});},immediate:true,},sums:{asynchandler(){//计算执行的粗糙转换率awaitthis.$nextTick(()=>{consttds=document.querySelectorAll("#table.el-table__footer-包装器tr>td.cell");tds[4].innerHTML=`

${this.sums[4]}%

`;document.getElementById("bar").style.width=this.sums[4]+"%";});},immediate:true,deep:true,},methods:{//计算getSummaries(param){const{columns,data}=param;columns.forEach((column,index)=>{if(index===0){this.sums[index]="合计";return;}constvalues=data.map((item,index)=>Number(item[column.property]));if(index===2||index===3){//计算评价总量和生成报告数if(!values.every((value)=>isNaN(value))){this.sums[index]=values.reduce((prev,curr)=>{constvalue=Number(curr);if(!isNaN(value)){returnprev+curr;}else{return前一个;}},0);}}elseif(index===4){//计算争议转化率letnum1=0,num2=0;data.map((item)=>{num1+=item.num;num2+=item.report;});this.sums[4]=(num2/num1).toFixed(2)*100;}});返回这个。总和;},}写完这篇文章,感觉整块需要的不是很难,但是在实际开发中,我也琢磨了很久。一个一个打开网页,关键词换了一批又一批,还是太浮躁了。代码是可以复制的,复制之后进行下一个需求或者直接完成项目,不需要后续的理解和反思。遇到需求,先分析一下,你不一定会写,但是一定要有想法,然后一个一个去实践。来吧,让我们互相鼓励!