详解vue结合el-table实现表格小计总计需求(summary-method)
作者：范特西是只猫
这篇文章主要介绍了vue结合el-table实现表格小计总计需求(summary-method),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
1. 实现效果
2. 核心部分
1.el-table 添加如下配置，添加 show-summary 属性，配置 summary-method 函数
<el-table ....... show-summary :summary-method="getSummaries" > ...... </el-table>
2.getSummaries 计算小计/总计逻辑
getSummaries(param) {
// 计算小计
let result = this.tableData
let sumTotalData = Object.assign({}, emptyTotalData)
result.forEach((item) => {
sumTotalData.age += Number(item.age)
sumTotalData.height += Number(item.height)
})
// 计算总计
let totalResult = this.statistics
return [
<span>
<strong> 小计 </strong>
<br />
<strong> 总计 </strong>
</span>,
<span> </span>,
<span> </span>,
<span>
<span> {sumTotalData.age} </span> <br />
<span> {totalResult.age} </span>
</span>,
<span>
<span> {sumTotalData.height} </span> <br />
<span> {totalResult.height} </span>
</span>,
]
},3. 完整组件代码
<template>
<div class="home">
<div class="body">
<el-table
:data="tableData"
border
row-key="date"
class="draggable-table"
style="width: 100%"
show-summary
:summary-method="getSummaries"
>
<el-table-column type="index" label="序号" width="200" />
<el-table-column prop="date" label="日期" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年龄" />
<el-table-column prop="height" label="身高" />
</el-table>
</div>
</div>
</template>
<script>
import Sortable from 'sortablejs'
let emptyTotalData = {
age: 0,
height: 0,
}
export default {
name: 'Demo',
data() {
return {
tableData: [], //table数据
statistics: 0, //总计数据
}
},
mounted() {
// 调用后端接口table数据
this.tableData = [
{ date: '2024-01-02', name: '张三1', age: '10', height: '165' },
{ date: '2024-01-03', name: '李四2', age: '11', height: '174' },
{ date: '2024-01-04', name: '王五3', age: '12', height: '174' },
{ date: '2024-01-05', name: '麻六4', age: '14', height: '185' },
{ date: '2024-01-07', name: 'kk5', age: '44', height: '179' },
{ date: '2024-01-08', name: 'fantay6', age: '21', height: '171' },
]
// 调用后端接口返回的总计数据
this.statistics = {
age: '112',
height: '1048',
}
},
methods: {
getSummaries(param) {
// 计算小计
let result = this.tableData
let sumTotalData = Object.assign({}, emptyTotalData)
result.forEach((item) => {
sumTotalData.age += Number(item.age)
sumTotalData.height += Number(item.height)
})
// 计算总计
let totalResult = this.statistics
return [
<span>
<strong> 小计 </strong>
<br />
<strong> 总计 </strong>
</span>,
<span> </span>,
<span> </span>,
<span>
<span> {sumTotalData.age} </span> <br />
<span> {totalResult.age} </span>
</span>,
<span>
<span> {sumTotalData.height} </span> <br />
<span> {totalResult.height} </span>
</span>,
]
},
},
}
</script>
<style scoped lang="scss">
.home {
.body {
width: 890px;
height: 500px;
border: #31aab2 solid 10px;
box-sizing: border-box;
padding: 20px;
box-sizing: border-box;
}
}
</style>到此这篇关于vue结合el-table实现表格小计总计需求（summary-method）的文章就介绍到这了,更多相关vue el-table表格小计内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！