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

本文主要是介绍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用个计算属性取值就可以了

这篇关于element-plus 新增一行合计。除了用summary-method还可以用append的插槽的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---