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

相关推荐
1024小神几秒前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript
拾光拾趣录2 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权3 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598244 分钟前
vue3源码解析:调度器
前端·vue.js
小小不董13 分钟前
深入理解oracle ADG和RAC
linux·服务器·数据库·oracle·dba
一一一87114 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚26 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件29 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
狄加山6751 小时前
Cadence模块复用
服务器·硬件架构·硬件工程·信号处理·智能硬件