前段时间，前端实现了一个ant表格的合计，在网上找了很多方法，不过大多数都是element表格的合计，没有找见ant表格实现合计的方法。于是，借鉴了一下element实现合计的方法，把功能实现了。（自己瞎研究的方法，如果觉得我写的不对或者有更好的方法可以留言告知。）
ant表格和element表格写合计的区别：
ant表格没有 show-summary和 :summary-method="getSummaries"这两个属性，要在自定义的footer里面去调用自定义列的方法；
element表格有show-summary和 :summary-method="getSummaries"两个属性，所以直接用:summary-method去自定义列就好了。
vue ant表格合计
效果图：
image.png
html部分：
<a-table
bordered
:loading="loading"
rowKey="userId"
:columns="columnsDetail"
:dataSource="dataSourceDetail"
:pagination="false"
:scroll="{ y: 350 }"
style="margin-bottom:30px;"
>
<span slot="waitCount" slot-scope="text, record">
{{ record.waitCount }}
</span>
<span slot="handledCount" slot-scope="text, record">
{{ record.handledCount }}
</span>
<template slot="footer" slot-scope="currentPageData">
<a-row>
<a-col
:span="6"
align="center"
v-for="(item, index) in getSummaries(currentPageData)"
:key="index"
>{{ item }}</a-col
>
</a-row>
</template>
</a-table>
js部分适用于ant表格和element：
getSummaries(param) {
//ant里面适用
const data = param
const columns = this.columnsDetail
//element里面适用
// const { columns, data } = param;
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计'
} else if (index === 1 || index === 2 || index === 3) {
//ant里面适用
const values = data.map(item => Number(item[column.dataIndex]))
//element里面适用
// 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 prev + curr
}
}, 0)
}
} else {
sums[index] = ''
}
})
return sums
},
vue element表格合计（js方法同ant的js方法）
效果图：
image.png
html部分
<el-table
:data="tableData"
show-summary
:summary-method="getSummaries"
border
style="width: 100%"
>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="grade" label="数据" width="180">
</el-table-column>
</el-table>
注意： show-summary显示合计行，:summary-method="getSummaries"自定义合计列
使用js实现table的合计功能
效果图：
image.png
html部分：
<table border="1" cellspacing="0" style="text-align: center;" id="table">
<tr>
<td>班级</td>
<td>男生</td>
<td>女生</td>
</tr>
<tr>
<td>1班</td>
<td>12</td>
<td>24</td>
</tr>
<tr>
<td>2班</td>
<td>34</td>
<td>13</td>
</tr>
<tr>
<td>3班</td>
<td>22</td>
<td>45</td>
</tr>
<tr>
<td>4班</td>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>5班</td>
<td>10</td>
<td>9</td>
</tr>
<tr class="sum">
</tr>
</table>
js部分：
<script>
$(function () {
var table = document.getElementById("table")
//获取表格的行数
var rows = table.rows
//获取表格的列数
var cells = table.rows.item(0).cells.length
//每次加载完清空最后一列数据，防止二次加载出现多行数据
$('.sum').empty()
$('.sum').append('<td>合计</td>')
// 如果从列开始遍历，得到的就是每一列的数据
// 如果从行开始遍历，得到的就是每一行的数据
for (var i = 1; i < cells; i++) {
var sum = 0
for (var j = 1; j < rows.length - 1; j++) {
sum += parseFloat(rows[j].cells[i].innerHTML.trim())
}
$('.sum').append('<td>' + sum + '</td>')
}
})
</script>
网友评论