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