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用个计算属性取值就可以了

相关推荐
Struggler281几秒前
Chrome插件开发
前端
阿巴~阿巴~1 分钟前
自主Shell命令行解释器
linux·运维·服务器
前端 贾公子13 分钟前
Monorepo + vite 怎么热更新
前端
coding随想22 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
SHUIPING_YANG28 分钟前
根据用户id自动切换表查询
java·服务器·数据库
chao_7891 小时前
更灵活方便的初始化、清除方法——fixture【pytest】
服务器·自动化测试·python·pytest
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端