el-table表尾添加合计行,自动合计,且特殊列自定义计算展示

本文介绍了如何在Element-UI的el-table中添加合计行,并解决自动合计可能出现的显示和计算错误问题。通过设置show-summary属性和自定义getSummaries方法,实现了对特殊列的自定义计算和展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果如图
在这里插入图片描述
1.element-ui的table表格有合计功能,但是功能却不完善,会有不显示和计算出现错误的问题,项目中有遇到,所以记录下
在这里插入图片描述
show-summary:自动合计
getSummaries():对合计行进行特殊处理展示

 <el-table
      border
      id="tables"
      :data="dnDatas"
      show-summary
      max-height="400px"
      class="tables"
      @cell-click="editName2"
      :row-class-name="tableRowClassName2"
      :key="randomKey"
      :summary-method="getSummaries"
    >

//getSummaries()返回的是一个展示的数组
//此方法中主要是将店名为001这种类型不要当成number类型来计算,方法可直接复制
//此方法另外是对列做计算,表格中毛利率的下标为7,所以index==7,再做除法赋值展示,
//导出功能excel,表格也会正常展示不会位移

 getSummaries(param) {
   
      const {
    columns, data } = param
      const sums = []

      columns
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值