vue element el-table表格勾选求和 el-table 勾选获取表格某几列数据求和

王工丶要专注

已于 2023-03-03 11:06:11 修改

阅读量3.1k

点赞数 6

文章标签： vue.js javascript 前端

于 2022-12-06 11:50:54 首次发布

本文链接：https://blog.csdn.net/qq_44224811/article/details/128199070

版权

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)

王工丶要专注

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
3
评论
vue element el-table表格勾选求和 el-table 勾选获取表格某几列数据求和

vue element el-table 表格勾选获取几列数据求和el-table表格勾选求和el-table表格某一列求和
复制链接

扫一扫