网站建设需要做什么准备工作,网络营销员是干嘛的,室内设计师必备的设计软件,重庆网站建设公司 #x1f935; 作者#xff1a;coderYYY #x1f9d1; 个人简介#xff1a;前端程序媛#xff0c;目前主攻web前端#xff0c;后端辅助#xff0c;其他技术知识也会偶尔分享#x1f340;欢迎和我一起交流#xff01;#x1f680;#xff08;评论和私信一般会回#… 作者coderYYY 个人简介前端程序媛目前主攻web前端后端辅助其他技术知识也会偶尔分享欢迎和我一起交流评论和私信一般会回 个人专栏推荐《前端项目教程以及代码》 ✨一、前言
el-table如果加上show-summary属性表尾第一列会显示“合计”二字其余列会将本列所有数值进行求合操作并显示出来。
templateel-table:datatableDatabordershow-summarystylewidth: 100%el-table-columnpropidlabelIDwidth180/el-table-columnel-table-columnpropnamelabel姓名/el-table-columnel-table-columnpropamount1sortablelabel数值 1/el-table-columnel-table-columnpropamount2sortablelabel数值 2/el-table-columnel-table-columnpropamount3sortablelabel数值 3/el-table-column/el-table
有时候只想对其中几列进行合计就可以使用summary-method自定义我们的合计方法指定要合计哪些列。
二、具体实现
方法很简单只要加个条件就可以
el-table:datatableDataborderheight200:summary-methodgetSummariesshow-summarystylewidth: 100%; margin-top: 20pxel-table-columnpropidlabelIDwidth180/el-table-columnel-table-columnpropnamelabel姓名/el-table-columnel-table-columnpropamount1label数值 1元/el-table-columnel-table-columnpropamount2label数值 2元/el-table-columnel-table-columnpropamount3label数值 3元/el-table-column/el-table
/templatescriptexport default {data() {return {tableData: [{id: 12987122,name: 王小虎,amount1: 234,amount2: 3.2,amount3: 10}, {id: 12987123,name: 王小虎,amount1: 165,amount2: 4.43,amount3: 12}, {id: 12987124,name: 王小虎,amount1: 324,amount2: 1.9,amount3: 9}, {id: 12987125,name: 王小虎,amount1: 621,amount2: 2.2,amount3: 17}, {id: 12987126,name: 王小虎,amount1: 539,amount2: 4.1,amount3: 15}]};},methods: {//指定列求和getSummaries(param) {// console.log(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]));// 只合计amount1和amount3想合并哪些列就在这里指定if (column.property amount1||column.property amount2) {sums[index] values.reduce((prev, curr) {const value Number(curr);if (!isNaN(value)) {return prev curr;} else {return prev;}}, 0);}});return sums;},};
/script
