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: [],
// 金额数据总计 默认为0
moneylisttotal: 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 = 0
if (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)