zoukankan      html  css  js  c++  java
  • 关于element中表格只展示一列数据的和

    先看效果,认款金额的合计,并且要实时更新

    正常做没有什么难点,循环数据+=,然后监听,

    技术点

    1、只展示一列的合计   这个代码也是找别人的扒下来的

      
    //只展示一列的合计的方法
    //注意在组件中 Table中需要加入
    :summary-method='getSum'  官方给的自定义计算方法
    show-summary
    这里两个属性
    //这里的重点是拿到表格数据,遍历,判断所属列,并放置数据
    getSum(param) { console.log(param);
    const {columns, data} = param const sums = [] columns.forEach((column, index) => { //这步是为了让最后一行出现 合计 这一行,并且最后一行第一列出现 合计 二字。合计的字可以在这里更改 if (index === 0) { //判断是第一列 sums[index] = '合计' return } switch (column.property) { case 'claimAmount': //这里是需要计算的列所绑定的prop的值 console.log(column.property); sums[index] = (this.claimOrderData.claimMemo) + '' //这里的this.xxxx 直接放计算后的值 break default: //这个默认不要忘记写 break } }) return sums },

    2、遍历与监听

    遍历就不说了这里说下监听

    'claimOrderData.confirmClaimParam': {
            handler(newVal, oldVal) {
              this.claimAmountTotal()  //执行的计算方法
            },
            deep: true
          },

    这里用到的是深度监听,
  • 相关阅读:
    [题解] [NOIP2008] 双栈排序——关系的冲突至图论解法
    [搬运] [贪心]NOIP2011 观光公交
    [总结] 最短路径数问题
    [持续更新]一些zyys的题的集合
    [教程]Ubuntu下完整配置自动壁纸切换
    在NOILINUX下的简易VIM配置
    [模板]ST表浅析
    21、Android--RecyclerView
    20、Android--GridView
    19、Android--ListView
  • 原文地址:https://www.cnblogs.com/C-dashazi/p/10644599.html
Copyright © 2011-2022 走看看