当前位置:首页 » 《资源分享》 » 正文

若依框架中通过对于table表格中的数据进行统计操作

24 人参与  2024年09月13日 14:41  分类 : 《资源分享》  评论

点击全文阅读


通过若依代码生成器生成的代码,对于table列表中的某些数据,对其进行数据统计。下面是对其统计的两种情况,分别是对所有行数据的某一个字段统计和对某一列的多个字段进行统计。

下面通过一个通过对所有商品的价格求和的案例进行说明

1、对table表格的多行数据的某一个字段进行统计

1.1、创建一个容器用于存放统计的结果

<el-col :span="1.5">  <div>商品总价: {{ totalPrice }}</div></el-col>

这里是在操作按钮前加了一个容器,用于统计商品的总价

1.2、确定当前table表格中绑定的数据,在data中声明一个属性用于存放价格总和

下面我们知道这个table表格中绑定的数据是snackList

下面是手动在data中声明的一个变量totalPrice用于计算价格总和,设置初始值为0

1.3(1)、创建一个button按钮,通过点击按钮触发价格统计事件

<el-button @click="calculateTotalPrice">计算总价</el-button>

在methods中添加calculateTotalPrice方法

Array.prototype.reduce的用法

 calculateTotalPrice() {      this.totalPrice = this.snackList.reduce((sum, item) => {        return sum + item.snackPrice;      }, 0);    },

1.3(2)、在查询是对所有的行数据的价格进行求和

这样的话在刚进入页面就会自动计算总价了,每次更新数据也会自动重新计算总价

这里使用toFixed() 方法将数字转换为字符串,并保留指定的小数位数。

getList() {      this.loading = true;      listSnack(this.queryParams).then(response => {        this.snackList = response.rows;        this.total = response.total;        //对所有行的价格进行求和      let sum = this.snackList.reduce((accumulator, item) => {      return accumulator + item.snackPrice;    }, 0);    // 使用 toFixed(1) 方法保留小数点后一位,并使用 parseFloat 转换回数字    this.totalPrice = parseFloat(sum.toFixed(1));        this.loading = false;      });    },

1.4、最终结果

2、对table表格的某一行数据的多个字段进行统计

下面对于table表格中新增一列属性为数量*价格

      <el-table-column label="数量*价格" align="center">        <template slot-scope="scope">          {{ scope.row.snackNumber * scope.row.snackPrice }}        </template>      </el-table-column>

结果


点击全文阅读


本文链接:http://zhangshiyu.com/post/159341.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 谢清羽宋凛(又名:迟冬再无相思)_谢清羽宋凛(又名:迟冬再无相思)
  • 从此你我银河相望:结局+番外(沈时愿谢聿深:结局+番外)完结_(沈时愿谢聿深)列表_笔趣阁(从此你我银河相望:结局+番外)
  • 叶墨谨幽璃幽思燃烬忘川路:结局+番外每日分享全书免费叶墨谨幽璃幽思燃烬忘川路:结局+番外每日分享全书免费
  • [赌鬼爹逼我卖身,我转头把他卖了]节选试读_张脸***男阿姨全文免费无弹窗阅读_笔趣阁
  • 叶墨谨幽璃迟少瑜:结局+番外_叶墨谨幽璃迟少瑜:结局+番外
  • [未婚夫联和我父母让我喜当妈后,我踹翻全员渣人变身真千金]小说免费在线阅读_[许泽冉冉路过]小说精彩节选免费试读
  • 修罗她英姿飒爽,扛刀断了女***剑(剑骨谢争流)
  • 此后余生皆孤寂:结局+番外精彩剧情温知夏谢清野完本_此后余生皆孤寂:结局+番外精彩剧情(温知夏谢清野)
  • (请别说爱我:结局+番外)全书免费(宋微夏薄以宸)_请别说爱我:结局+番外列表_笔趣阁宋微夏薄以宸
  • 微风轻拂又见你:结局+番外情感纠葛(林书意陆沉)_微风轻拂又见你:结局+番外情感纠葛林书意陆沉
  • 他亦无心,负我春情完本_陆云苏酥白月光爆款小说高能章节试读
  • 雨落方知,爱已成灰:结局+番外(今疏月朗沉舟)_雨落方知,爱已成灰:结局+番外今疏月朗沉舟

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1