Vue+Element-ui Table 列求和
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
Vue+Element-ui Table 列求和
- Vue代码
- 求和getSummaries
- 效果图
Vue代码
<el-table v-loading="loading" :data="standardList"
@sort-change='sortChange' :summary-method="getSummaries" show-summary @selectionchange="handleSelectionChange">
这两个一定要加上 :summary-method=“getSummaries” show-summary,
show-summary 也必须加上,如果不加,底部不会显示;
getSummaries对应的计算的函数
求和getSummaries
把getSummaries放在 methods: {}里面即可
getSummaries(param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计'
}
// index >= 3 || index <= 11 是你需要计算的列
// 当然也可以指定一个或者多个列
// index === 2 || index === 3 这样值求和第二个与第三个列
else if (index >= 3 && index <= 11) {
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 Math.floor((prev + curr) * 100) / 100;
} else {
// 保存了两位小数点
return Math.floor(prev * 100) / 100;
}
}, 0)
} else {
sums[index] = 'N/A'
}
} else {
sums[index] = ''
}
})
return sums
},
效果图

A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)