欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 焦点 > el-table实现最后一行合计功能并合并指定单元格

el-table实现最后一行合计功能并合并指定单元格

2025/5/7 13:03:56 来源:https://blog.csdn.net/qq_45695853/article/details/143914290  浏览:    关键词:el-table实现最后一行合计功能并合并指定单元格

效果图如下:
在这里插入图片描述
表格代码如下:

<el-table width="100%"ref="tableRef" style="margin-bottom: 15px;":data="jlData"class="tableHeader6"header-row-class-name="headerStyleTr6":row-class-name="tableRowClassName"show-summary:span-method="arraySpanMethod"><el-table-column prop="staff_name" label="姓名"></el-table-column><el-table-column prop="staff_id" label="工号"></el-table-column><el-table-column prop="syjlTotal" label="使用量"></el-table-column><el-table-column min-width="125px" prop="xzjlTotal" label="处理报告下载量"></el-table-column><el-table-column min-width="125px" prop="cxbgTotal" label="撤销报告下载量"></el-table-column><el-table-column min-width="110px" prop="lyTotal" label="录音下载量"></el-table-column>
</el-table>

在这里插入图片描述
在这里插入图片描述

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }:any)=> {nextTick(()=>{if(tableRef.value.$el){let current = tableRef.value.$el.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer")// cell[0].innerHTML = '合计数'  修改文本let cell = current.rows[0].cellscell[0].style.textAlign = "center"; // 合计行第一列字段居中显示。cell[1].style.display = "none"; // 隐藏被合并的单元格,不隐藏的话还会占着位置。cell[0].colSpan = "2"; // 合并单元格个数console.log(cell,'cell')//修改单元格的样式for(let i=0;i<cell.length;i++){console.log(cell[i])if(i==0){cell[i].style.color = 'red'}else{cell[i].style.color = 'orange'}}}})}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词