halo小伙伴们,小编之前有写过一篇关于el-table组件底部固定两行并动态赋值的文章;在前几天,小编又有一个需求也是底部固定两行的,但是这次有个需求就是其中一列是等于表格的其中两列之和。所以之前的方法是不可行的了,这次换一种赋值方法:
最终结果是要实现如下图所示的表格:
其中带有本页合计和总合计,这里总的合计是后端传来的值。本页合计是前端计算上去的。
首先el-table需要绑定 :summary-method=“getSummaries” 以及 show-summary
<el-table
v-loading="loading"
:data="tableData"
:empty-text="emptyText"
:highlight-current-row="highLightRow"
stripe
border
style="width: 100%"
:summary-method="getSummaries"
show-summary
@selection-change="selectionChangeHandle"
@row-click="rowClickHandle"
>
接着编写getSummaries方法
getSummaries(param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 1) {
sums[index] = <p>
<div>本页合计</div>
<br/>
<div> 所有合计</div>
</p>
} else {
const values = data.map(item => Number(item[column.property]))
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return Number((prev + curr).toFixed(2))
} else {
return Number(prev.toFixed(2))
}
}, 0)
// 对个别行进行判断取值,因为totalAmount行是等于这两行之和的
if (column.property === 'income') {
this.income_ = sums[index]
}
if (column.property === 'cpc') {
this.cpc_ = sums[index]
}
// 以下判断分割两行 一行本页(取值上面的值之和) 一行总计
if (column.property === 'totalAmount') {
sums[index] = <p>
<div>{Number((this.income_ + this.cpc_).toFixed(2))}</div>
<br/>
<div ref={column.property}>{this.info[column.property + 'Total']}</div>
</p>
return
} else {
sums[index] = <p>
<div ref={column.property + '_'}>{sums[index]}</div>
<br/>
<div ref={column.property}>{this.info[column.property + 'Total']}</div>
</p>
return
}
} else {
sums[index] = '-'
return
}
}
})
return sums
},
这样就可以达到将其中列的值相加等于另一列需要的总计值。
后端的数据只需要传对应的列表数据加上一个所有总计即可。
好了,这是小编对于el-table的summary-method的一些使用。有更好的方法的小伙伴们记得跟小编分享一下你们的开发经验哦!