vue3中el-table实现表格合计行的示例代码
作者：可爱的秋秋啊
这篇文章主要介绍了vue3中el-table实现表格合计行,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
el-table标签上加属性 show-summary :summary-method=“getSummary”
<el-table :data="formDate.scoreList" style="width:100%;height: 96%;" stripe show-summary
:summary-method="calculateSummary" :header-cell-style="{ textAlign: 'center', borderColor: ' #CCC', background: '#f5f7fa' }"
:cell-style="{ textAlign: 'center' }">
<el-table-column type="index" label="序号" width="120"></el-table-column>
<el-table-column type="puuid" label="uuid" v-if="false"></el-table-column>
</el-table>js中添加函数（合计没有额外的附件参数添加）
// 合计
const calculateSummary = ({ columns, data }) => {
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计总分'
return
}
const values = data.map((item) => Number(item[column.property]))
// index === 3判断那一列求合计，下标从0开始
if (!values.every((value) => Number.isNaN(value)) && index === 3) {
sums[index] =` ${values.reduce((prev, curr) => {
const value = Number(curr)
if (!Number.isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)}`
}
})
return sums
}js中添加函数（合计有额外的附件参数添加的情况）
let activeList=ref('')
// 合计
const calculateSummary = ({ columns, data }) => {
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计总分'
return
}
// 通过自定义参数判断除了表格中的数据外还额外加值
let a = activeList.value == 'first' ? 21 : activeList.value == 'second' ? 12 : activeList.value == 'third' ? 18 : 3
// 获取表格中的数据
const values = data.map((item) => Number(item[column.property]))
//index === 3判断那一列求合计，下标从0开始
if (!values.every((value) => Number.isNaN(value)) && index === 3) {
// 通过计算额外值a+表格中的合计值（模板字符串无法直接相加需要转换数据格式）
sums[index] = a+Number(` ${values.reduce((prev, curr) => {
const value = Number(curr)
if (!Number.isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)}`)
}
})
return sums
}到此这篇关于vue3中el-table实现表格合计行的文章就介绍到这了,更多相关vue3 el-table合计行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！