您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“vue表格计算总计的方法”,在日常操作中,相信很多人在vue表格计算总计的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”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] += '元' // 得到的总计后加上单位元
<template> <el-card class="box-card"> <!-- 只合计不做其他处理 --> <h3>只合计不做其他处理</h3> <el-table :data="tableData6" border show-summary > <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> <!-- 简单求和实例处理 --> <h3 >简单求和实例处理</h3> <el-table :data="tableData6" border :summary-method="getSummaries01" show-summary > <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> <!-- 指定列求和实例处理 --> <h3 >指定列求和实例处理</h3> <el-table :data="tableData6" border :summary-method="getSummaries02" show-summary > <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>
到此,关于“vue表格计算总计的方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。