vue表格(table)计算总计方式
更新时间：2022年07月31日 10:02:40 作者：manyuejizhao
这篇文章主要介绍了vue表格(table)计算总计方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue 表格计算总计
<el-table v-loading="loading" :summary-method="getSummaries" show-summary :data="abcList" border tooltip-effect="darkTable" >
首先需要在table标签中添加
:summary-method="getSummaries" // 调用方法
show-summary //标签属性
methods: {
getSummaries(param) {
const { columns, data } = param
console.log(columns, data, 'columns,data')
const sums = []
columns.forEach((column, index) => {
// 设置第一列的值为总计
if (index === 0) {
sums[index] = '总计'
return
}
sums[3] = this.form.result
sums[3] += '元'
})
return sums
}
}因为Element上计算总计的方法是计算当前页上金额的总和，稍加修改~
sums[index] = '总计' // 把下标为0的列赋值为总计 sums[3] = this.form.result // this.form.result为init初始化时从接口中拿到的总计，赋值到下标为3的列上 sums[3] += '元' // 得到的总计后加上单位元
vue table表格合计 ( Element )
<template>
<el-card class="box-card">
<!-- 只合计不做其他处理 -->
<h2>只合计不做其他处理</h2>
<el-table :data="tableData6" border show-summary style="width: 100%">
<el-table-column prop="id" label="ID" width="180" align="center">
</el-table-column>
<el-table-column prop="name" label="产品" align="center">
</el-table-column>
<el-table-column prop="number" label="数量" align="center">
</el-table-column>
<el-table-column prop="price" label="价格" align="center">
</el-table-column>
<el-table-column prop="profit" label="利润率" align="center">
</el-table-column>
</el-table>
<!-- 简单求和实例处理 -->
<h2 style="margin-top:100px">简单求和实例处理</h2>
<el-table :data="tableData6" border :summary-method="getSummaries01" show-summary style="width: 100%;">
<el-table-column prop="id" label="ID" width="180" align="center">
</el-table-column>
<el-table-column prop="name" label="产品" align="center">
</el-table-column>
<el-table-column prop="number" label="数量" align="center">
</el-table-column>
<el-table-column prop="price" label="价格" align="center">
</el-table-column>
<el-table-column prop="profit" label="利润率" align="center">
</el-table-column>
</el-table>
<!-- 指定列求和实例处理 -->
<h2 style="margin-top:100px">指定列求和实例处理</h2>
<el-table :data="tableData6" border :summary-method="getSummaries02" show-summary style="width: 100%;">
<el-table-column prop="id" label="ID" width="180" align="center">
</el-table-column>
<el-table-column prop="name" label="产品" align="center">
</el-table-column>
<el-table-column prop="number" label="数量" align="center">
</el-table-column>
<el-table-column prop="price" label="价格" align="center">
<template slot-scope="scope">
{{$utils.formSum(scope.row.price, 2, '.', ',')}}
</template>
</el-table-column>
<el-table-column prop="profit" label="利润率" align="center">
<template slot-scope="scope">
{{Number(scope.row.profit).toFixed(2)}} %
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<script>
export default {
data() {
return {
tableData6: [{
id: '12987122',
name: '袜子',
number: '234',
price: '3',
profit: '10.9'
}, {
id: '12987123',
name: '鞋子',
number: '165',
price: '343.8',
profit: '12.00'
}, {
id: '12987124',
name: '裤子',
number: '324',
price: '249.0',
profit: '9'
}, {
id: '12987125',
name: '腰带',
number: '621',
price: '342.0',
profit: '17.00'
}, {
id: '12987126',
name: '手镯',
number: '539',
price: '43421',
profit: '153333'
}]
};
},
methods: {
//格式化数字，格式化金额
// formSum: function(number, decimals, dec_point, thousands_sep) {
// /*
// * 参数说明：
// * number：要格式化的数字
// * decimals：保留几位小数
// * dec_point：小数点符号
// * thousands_sep：千分位符号
// * */
// number = (number + '').replace(/[^0-9+-Ee.]/g, '');
// var n = !isFinite(+number) ? 0 : +number,
// prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
// sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
// dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
// s = '',
// toFixedFix = function(n, prec) {
// var k = Math.pow(10, prec);
// return '' + Math.ceil(n * k) / k;
// };
// s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
// var re = /(-?\d+)(\d{3})/;
// while (re.test(s[0])) {
// s[0] = s[0].replace(re, "$1" + sep + "$2");
// }
// if ((s[1] || '').length < prec) {
// s[1] = s[1] || '';
// s[1] += new Array(prec - s[1].length + 1).join('0');
// }
// return s.join(dec);
// }
/**
* 将show-summary设置为true就会在表格尾部展示合计行。
* 默认情况下，对于合计行，第一列不进行数据求合操作，
* 而是显示「合计」二字（可通过sum-text配置），
* 其余列会将本列所有数值进行求合操作，并显示出来。
* 当然，你也可以定义自己的合计逻辑。
* 使用summary-method并传入一个方法，返回一个数组，
* 这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。
*/
//简单求和实例处理
getSummaries01(param) {
const {
columns,
data
} = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
return;
}
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;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
});
return sums;
},
//指定列求和实例处理
getSummaries02(param) {
const {
columns,
data
} = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
} else if (index === 3) { //对价格做处理：保留两位小数
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;
} else {
return prev;
}
}, 0);
sums[index] = this.$utils.formSum(sums[index], 2, '.', ',');
} else {
sums[index] = '/';
}
} else if (index === 4) { //对利润率做处理：保留两位小数
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;
} else {
return prev;
}
}, 0);
sums[index] = sums[index].toFixed(2);
sums[index] += ' %';
} else {
sums[index] = '/';
}
} else {
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;
} else {
return prev;
}
}, 0);
} else {
sums[index] = '/';
}
}
});
return sums;
}
}
};
</script>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue3中update:modelValue的使用与不生效问题解决
现在vue3的使用越来越普遍了,vue3这方面的学习我们要赶上,下面这篇文章主要给大家介绍了关于vue3中update:modelValue的使用与不生效问题的解决方法,需要的朋友可以参考下2022-03-03
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
小编最近遇到这样的需求，当点击一个按钮可以变换里面字的内容，刚开始还真是一头雾水，不知所措。仔细想想屡屡思绪，很容易的解决了。接下来通过本文给大家介绍elementUI Vue 单个按钮显示和隐藏的变换功能,需要的朋友可以参考下2018-09-09
Element中el-input密码输入框浏览器自动填充账号密码问题的解决方法
自己写了一个管理系统,登录成功之后,浏览器提示我保存账号密码,每次登录时就会自动回填记住的账号密码,方便用户快速登录,下面这篇文章主要给大家介绍了关于Element中el-input密码输入框浏览器自动填充账号密码问题的解决方法,需要的朋友可以参考下2022-09-09
Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
组件（Component）是 Vue.js 最强大的功能之一。接下来给大家介绍vuejs单向绑定、双向绑定、列表渲染、响应函数的相关知识，非常不错，感兴趣的朋友一起看看吧2016-09-09
在Vue中，动画效果是非常有用的，它可以使用户界面变得更加生动、有趣，本文中我们将学习如何在Vue中进行自定义动画与动画效果设计，感兴趣的可以了解一下2023-06-06
这篇文章主要给大家介绍了关于Vue3中导航守卫的基本使用方法,正如其名vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航,下面需要的朋友可以参考下2023-03-03
本文详细介绍了VueRouter 路由的概念、规则、基础等相关内容，文中运用大量的图片进行讲解，感兴趣的小伙伴可以看一看这篇文章2021-08-08
这篇文章主要为大家详细介绍了vuex实现简单的购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选功能
这篇文章主要介绍了element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选,项目中用到了vue的element-ui框架，用到了el-tree组件，由于数据量很大，使用了数据懒加载模式，即异步树，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue中的watch和computed的相关资料，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-11-11
最新评论