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

效果图如下:

表格代码如下:

bash 复制代码
<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>


js 复制代码
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].cells
		              cell[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'
		                  }
		                  
		              }
		          }
		      })
    }
相关推荐
百花~25 分钟前
前端三剑客之一 HTML~
前端·html
lang201509281 小时前
Spring远程调用与Web服务全解析
java·前端·spring
Sheldon一蓑烟雨任平生1 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
listhi5203 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
paopaokaka_luck3 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
一点一木3 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊3 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost4 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
Sheldon一蓑烟雨任平生4 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
BestAns4 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端