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

夏天想2024-08-28 12:26

复制代码

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