vue el-table自定义合计
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue el-table自定义合计相关的知识，希望对你有一定的参考价值。
参考技术A 需求：表格显示合计效果
1、在table里添加 ref=“table” show-summary summary-method
2、在方法里增加合计方法
getSummaries(param)
const columns, data = param
const sums = []
columns.forEach((column, index) =>
if (index === 0)
sums[index] = '合计'
return
const values = data.map((item) => Number(item[column.property]))
if (column.property === 'JQInsFee' || column.property === 'SYInsFee' || column.property === 'TaxFee')
sums[index] = values.reduce((prev, curr) =>
const value = Number(curr)
if (!isNaN(value))
return Number(Number(prev) + Number(curr)).toFixed(2)
else
return prev
, 0)
sums[index]
)
return sums
,
3、自定义合计没有效果时是因为table给了固定高度（ps也可以不给固定高度，使用max-height）
updated()
this.$nextTick(() =>
this.$refs['table'].doLayout()
)
以上是关于vue el-table自定义合计的主要内容，如果未能解决你的问题，请参考以下文章