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 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead5 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js