当前位置 博文首页 > lbttwo的博客:像调用方法一样调用Computed让table表格按列自动

    lbttwo的博客:像调用方法一样调用Computed让table表格按列自动

    作者:[db:作者] 时间:2021-08-30 15:54

    像调用方法一样调用Computed让table表格按列自动计数

    后端返回数据的时候,通常有两种,一种是单页,一种是列表,单页填进去就完了,列表一个循环也能搞定,但是当需要对列表做合计的时候就比较烦人了

    举个栗子
    在这里插入图片描述

    写个方法一个个去遍历那多难受,思路就是,遍历后端的一个条数据拿到所有键名存起来,然后给自定义的空对象写入属性,主要用到了Object.defineProperty方法,为了让getCount用起来更像调用方法这里用到了闭包,下面是代码

    computed:{
                getCount(){
                    this.totalCount={};
                    let _self=this;
                   return function() {
                      let flag=false;
                       for(let item of _self.resMsg){
    
                              for(let key of Object.keys(item))
                              {
                                  if(flag===false){
                                      Object.defineProperty(_self.totalCount,'total'+key.substring(0,1).toUpperCase()+key.substring(1),{
                                          configurable:true,
                                          enumerable:true,
                                          writable:true,
                                          value:0
                                      });
    
                                  }
    
     //下面这句改个首字母大写,驼峰好看,total这个字符串看个人喜好,语句放这里相当于约定添加属性和遍历属性的顺序是一致的
                                  _self.totalCount['total'+key.substring(0,1).toUpperCase()+key.substring(1)]+=item[key]
    
                              }
                              flag=true;
    
    
    
                       }
                   }
                }
            }
    

    这里的totaCount作为接收计数的集合,它和this都可以通过计算属性的参数列表传进去,想封装得更彻底可以搞一搞,这样就能按键值全部自动求和
    在这里插入图片描述
    然后就是拿自己需要的数据展示了,页面里的‘/’是通过过滤器管道生成的,为0就占位

      isZero: function (value) {
                    if(value>0){
                        return value;
                    }else{
                        return '/'
                    }
                }
    
    cs