element-plus 新增一行合计。除了用summary-method还可以用append的插槽

复制代码
:summary-method="getSummaries"
复制代码
<el-table
  :data="reformtableData"
  style="width: 100%"
  show-summary
  :summary-method="getSummaries"
  ref="reformtableRef"
>
复制代码
<el-table-column label="序号" type="index" width="60" align="center">
</el-table-column>
<el-table-column prop="itemType" label="改造类型" width="130" align="center">
  <template #default="scope">
    {{ reformItemStatus.filter(rs => rs.value == scope.row.itemType)[0]?.label }}
  </template>
</el-table-column>
</el-table>
复制代码
const getSummaries=(param)=>{
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
    } else {
      // console.log("values",values)
      const values = data.map(item => Number(item.price));
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
      } else {
        sums[index] = 'N/A';
      }
      filters.totalAmount=sums[index]
    }
  });
   nextTick(()=>{
    reformtableRef.value.doLayout(); // 重新渲染表格
   })


  return sums;
}

如果想添加一行合计本来可以按照上面的方法写的。

因为我用了summary-method他在计算最后一行的时候使用

复制代码
:span-method="objectSpanMethod"

根本这一行没有算进去。找了半天没有找到原因。开始以为是没有重新渲染使用了

复制代码
// nextTick(()=>{
//   reformtableRef.value.doLayout(); // 重新渲染表格
// })

也不起作用。最后想的可以使用这个append插槽。而且样式还可以自己设置加个class就行了。方便很多啊

复制代码
<template #append >
  <span>合计</span>
  <span>{{getAllPrice}}</span>
</template>

getAllPrice用个计算属性取值就可以了

相关推荐
打小就很皮...3 分钟前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
IT_陈寒12 分钟前
Redis性能翻倍的7个冷门技巧:从P5到P8都在偷偷用的优化策略!
前端·人工智能·后端
Moonbit24 分钟前
MoonBit Meetup 丨 手把手带你走进 AI 编程新世代
前端·后端·程序员
携欢25 分钟前
PortSwigger靶场之 CSRF where token is not tied to user session通关秘籍
前端·csrf
执剑、天涯39 分钟前
通过一个typescript的小游戏,使用单元测试实战(二)
javascript·typescript·单元测试
HHHHHY1 小时前
使用阿里lowcode,手搓一个Carousel 走马灯容器组件
前端·react.js
用户352120195601 小时前
React-router v7
前端
Mintopia1 小时前
⚡ AI 时代,全栈 Next.js 开发的激情在哪里?
前端·aigc·全栈
Hello123网站1 小时前
300多个Html5小游戏列表和下载地址
前端·html·html5
算力魔方AIPC1 小时前
PP-OCRv5 MCP服务器在海光主板的部署与实战
运维·服务器