vue element el-table 表格勾选获取几列数据求和el-table表格勾选求和
先看案例如下图所示：el-table 勾选后求出支付金额数据，计算出总金额数据。
我们来一步步分析方便各个层次的朋友理解！相信我代码绝对管用~ 这瓜绝对保熟！🤣🤣
首先第一步 我先写了一个小的求和demo方便大家理解
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title></title><script type="text/javascript">var arr = [1,2,3]var sum = arr.reduce((pre,cur)=>{return pre +cur})console.log(sum)</script></head><body></body></html>
😍😍打印出来的求和结果为6 正确
el-table 表格代码如下（注意点 勾选的事件绝对 不能少了 @selection-change="handleSelectionChange"）
<el-table ref="multipleTable" :data="tableDataInfo" :header-cell-style="{ background: '#EEF1F4', color: '#646a73' }" tooltip-effect="dark"style="width: 100%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="85"></el-table-column><el-table-column prop="number" label="订单编号" width="220"></el-table-column><el-table-column prop="type" label="产品类型" width="220"></el-table-column><el-table-column prop="createTime" label="创建时间" width="220"></el-table-column><el-table-column prop="expirationTime" label="到期时间" width="220"></el-table-column><el-table-column prop="paymentAmount" label="支付金额" width="220"></el-table-column></el-table><!-- 分页区域开始 --><div class="fenye"><el-pagination :current-page="queryInfo.pagenum" :page-sizes="[ 5,10, 15, 20]" :page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange"@size-change="handleSizeChange"></el-pagination></div>
<div class="jlmain"><div class="jlmain1">已选总金额</div><div class="jlmain2">{{ moneylisttotal }}</div><div class="jlmain3">该金额为实际支付金额</div></div>
在return中需要定义的数据字段
return {// 表格数据tableDataInfo: [],// moneylist是点击勾选出来的那几列金额数据组成的数组moneylist: [],// 金额数据总计 默认为0moneylisttotal: 0,// 表格数据searchForm: {pageNum: 0,pageSize: 10,},/* 分页 */queryInfo: {query: "",// 当前的页数pagenum: 0,// 当前每页显示多少条数据pageSize: "",},}
Firstly! 🙋♂️🙋♂️首先点击勾选出来的数据，是勾选出来的那一行的所有字段的数据 大家可以打印尝试一下 console.log(this.$refs.multipleTable.selection);
Next !👨👧👨👧 然后把勾选出来的所有数据遍历出我要的字段数据，然后都赋值到moneylist:[ ] 这个数组中
End!👨👧👦👨👧👦 最后对这个moneylist:[ ]数组求和
handleSelectionChange() {// 打印出来的数据 就是勾选获取的勾选那一行的数据console.log(this.$refs.multipleTable.selection);// 现在moneylist这个数组 就是由我勾选每一行的paymentAmount组成的数组了this.moneylist = this.$refs.multipleTable.selection.map((item) => item.paymentAmount);// 计算总金额moneylisttotal// 如果moneylist.length的长度大于0 那么就return pre + cur;// 如果长度小于等于0 就 直接赋值 this.moneylisttotal = 0if (this.moneylist.length > 0) {this.moneylisttotal = this.moneylist.reduce((pre, cur) => {return pre + cur;});} else {return (this.moneylisttotal = 0);}},
😝😝小tips:如果不需要勾选，直接求el-table表格某一列的和，请直接上element框架中查看
温馨提示：如果以上方法尝试过了，问题还没解决的朋友，如果您不嫌弃，欢迎评论或者私信联系，我会第一时间与您取得联系，和您一起探讨解决问题！绝不收取任何咨询费用！
关键词搜索优化（与文章无关）：vue element el-table 表格勾选获取几列数据求和el-table表格勾选求和el-table表格某一列求和
备忘录：在小程序中使用出现数据直接加在数字后面了，更改方式
return (parseFloat(pre)+parseFloat(cur)).toFixed(2)
