el-table标签上加属性 show-summary :summary-method=“getSummary”文章来源地址https://www.toymoban.com/news/detail-783112.html
<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
}
文章来源:https://www.toymoban.com/news/detail-783112.html
到了这里,关于vue3中el-table实现表格合计行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!